meta name="viewport" content="width=device-width, initial-scale=1"
程序员文章站
2022-03-02 13:35:00
...
width和device-width
width和height指浏览器视区的尺寸,可以通过document.documentElement.clientWidth;获取。
而device-width和device-height指显示器的尺寸,可以通过window.screen.width。
不是每个人都会全屏运行他或她的浏览器,但是移动浏览器将填满可用的屏幕。
默认情况下,现代移动设备会缩放网页来适合所估计的视区。
meta标签
在网页的添加以下这行代码:
<meta name="viewport" content="width=device-width, initial-scale=1">
这告诉移动设备,将视区视为具有设备的物理宽度相同的宽度。
而且,它还告诉iPhone、iPod touch和iPad在计算宽度时考虑方向。
CSS 像素
CSS规范要求,如果输出设备的像素密度与典型计算机显示器的像素密度差别巨大,浏览器应该重新调节像素值。
一些开发人员现在将像素度量方法称为CSS像素。
上一篇: Flex 4 打印预览 实例
推荐阅读
-
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
-
meta 标签 viewport content=“width=device-width,initial-scale=1“
-
meta name="viewport" content="width=device-width,initial-scale=1.0" 解释_html/css_WEB-ITnose
-
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
-
meta name="viewport" content="width=device-width,initial-scale=1.0" 解释_html/css_WEB-ITnose
-
meta 标签 viewport content=“width=device-width,initial-scale=1“
-
meta 标签 viewport content=“width=device-width,initial-scale=1“
-
meta name="viewport" content="width=device-width, initial-scale=1"
-
关于 viewport 界面适配不同设备方案: meta 标签 name="viewport" content="width=device-width, initial-scale=1"
-
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"