关于HTML5中meta name=“viewport“ 的用法---web前端工作笔记014

最新推荐文章于 2022-11-30 17:16:40 发布
最新推荐文章于 2022-11-30 17:16:40 发布
阅读量331 收藏
点赞数
分类专栏： 前端UI&后端&分布式
本文为博主原创文章，未经博主 添柴程序猿 允许不得转载 违者追究法律责任。
本文链接：https://blog.csdn.net/lidew521/article/details/113917532
版权
移动端布局中，HTML5的meta viewport用于处理不同设备的屏幕尺寸与缩放问题。文章介绍了devicePixelRatio概念，解释了layout viewport与visual viewport的区别，并提供了viewport设置的实例代码，强调了安卓平台对target-densitydpi属性的弃用。
摘要由CSDN通过智能技术生成

移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西。

还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

所以在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例&#x

了解本专栏 订阅专栏 解锁全文 超级会员免费看
添柴程序猿
关注
专栏目录
订阅专栏
尚硅谷web前端HTML5+CSS3笔记
qq_52380174的博客
12-19 4468
HTML/CSS笔记#自用#尚硅谷#李立超
茶话
weixin_34077371的博客
12-31 98
茶话viewport一个典型的针对移动端优化的页面会包含类似酱紫的内容：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">这玩意儿看起来眼熟不？这篇博将来茶话一下这个 name="viewport" 中的 viewport ...
java学习笔记 head first java
Dus的博客
07-30 1461
文章目录golang to javaHead First Java golang to java golang工程师，最近开始学习一些java Head First Java instanceof相当于断言 Dog d = new Dog() Object o = d if (o instanceof Dog) { Dog d = (Dog)o } interface在java和golang中基本一致，java中的interfece是一个100%抽象类，所有函数都是抽象的。必须要用implements显
使用meta标签的【viewport】控制在移动设备上的布局
精彩人生
02-10 1439
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大
meta 中name="viewport" 的含义
lnx0307的专栏
07-03 5378
1、<meta name="viewport" content=" "> ViewPort 标记用于指定用户是否可以缩放Web页面 ViewPort 标记还表示文档针对移动设备进行了优化 2、<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimu
meta name = viewport
笑望灬星辰
03-30 571
meta name = viewport <meta name="viewport" content="..." /> // width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’ // device-width 设备宽度 // height 设置viewport⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置 // initial-scale 默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数 // minimum-scale 允许⽤户最⼩缩放
HTML5中meta name="viewport"
weixin_30608503的博客
05-09 150
viewport具体用法为:使用该meta标签时，在content中写属性，用逗号隔开 　　　　　　 属性名备注 width 设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度 initial-scale 设置页面的初始缩放值，为一个数字，可以带小数 minimum-scale 允许用户...
前端笔记03 - 超链接标签
kukudeqi的博客
09-08 223
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
技术胖--前端学习html5表单美化部分笔记
qq_53157024的博客
09-01 2064
灰色的提示是h5的哪个特性？ 有的浏览器需要点击两次新增的表单类型email,Date,Range,Tel,search,color……文本框中，输入一次，下一次在输入会自动提示是哪个特性？和初始化页面之后，如何让input自动获得焦点？表单验证的新特性html中如何设置表单元素必填？html5表单验证如何使用正则表达式？html5表单中设置了必填，提交表单的时候如何做到不验证？或者前一个是在form标签之后用的后一个input submit的按钮上面运用的场景：一个按钮要验证，一个不用验证，不用验证的那个
Django web开发(一) - 前端
最新发布
每天进步亿点点
11-30 6万+
Django学习 Web框架 Python语言
meta 之 viewport
weixin_30562507的博客
09-02 76
移动网页开发涉及到 viewport，随意一篇，分享一下。 常用的 viewport meta 如下： 1 <metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> ...
HTML 5 meta name="viewport"
网生代
02-19 1252
在用HTML5开发手机应用或手机网页时，部分总会有如下一段代码: meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"/>   什么是Viewport 　 　　　手机浏览器是把页面放在一个虚拟的
使用HTML5的＜meta＞标签中的name=“viewport“属性可以控制页面的缩放比例，但有时这可能不足以满足你的需求
BLOG域名:programb.blog.csdn.net
07-03 777
如果你需要自定义页面布局或响应式设计，建议通过其他方式来实现，例如使用CSS媒体查询、JavaScript或其他前端技术。这样可以确保你的网站在不同的设备和浏览器中都具有良好的兼容性和用户体验。使用HTML5的标签中的name="viewport"属性可以控制页面的缩放比例，但有时这可能不足以满足你的需求。在这种情况下，你可以考虑使用Hack来解决这个问题。然而，请注意，使用Hack可能会违反W3C标准，并可能导致网站在不同浏览器和设备上表现不一致。因此，我无法提供关于如何使用Hack的建议或指导。
非响应式设计也可以用Viewport Meta标签
各研发管理
10-29 154
源文章地址：http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design 我相信你肯定用了 viewport meta tag 来做响应式设计，但你是否知道 viewport 标签对非响应式设计业是非常有用的？如果你还从没将你的网站转换成为可响应的，就应该好好看下这篇文章，我会教你怎用用view...
html5页面视图meta,html网页中meta viewport属性说明
weixin_29901515的博客
06-03 278
HTML meta viewport属性说明什么是Viewport手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中，通常这个虚拟的“窗口”(viewport)比屏幕宽，这样就不用把每个网页挤 到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局)，用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让...
HTML5中meta viewport 的用法
Liuqz2009的专栏
04-24 1万+
移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。 在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRa...
＜meta name=“viewport“ ......＞是什么意思
u012114437的博客
03-24 4507
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 1、name属性值viewport表示视口，不仅匹配PC端，也可匹配移动端。 2、content属性值： （1）width：可视区域的宽度，值可为数字或关键词 （2）device-width，设备屏幕的物理宽度 （3）height：同width （4）intial-scale:页面首次.
viewport的meta标签
weixin_43269800的博客
03-10 254
我们都是知道用户是可以对页面进行页面缩放的。但是pc端的用户缩放和移动端的缩放浏览器是有差异的。 pc端：用户缩放影响的布局视口的尺寸，会影响布局。 移动端：用户缩放影响的视觉视口的尺寸。（页面布局不会乱） initial-scale 初始化缩放，也叫系统缩放。 系统缩放是参照与理想视口（独立设备像素）进行缩放，同时控制布局视口和视觉视口。 当设置initial-scale=1时，等同于widt...
HTML5入门：第一天学习笔记与元素详解
在HTML5-day01的学习笔记中，我们主要探讨了HTML5的基础结构以及一些常用的元素和属性。HTML5是第五代超文本标记语言，它不仅提升了网页的兼容性和交互性，还引入了许多新的标签和特性来更好地支持现代网页设计。 *...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

添柴程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值