对于响应性设计,是否强制使用元标记视图?
<meta name="viewport" content="width=device-width,initial-scale=1">
我几乎没有做过测试,而且它在桌面浏览器上运行良好,而且它适合于窗口的大小,即使我使用视图作为宽度或高度来定义页眉和页脚。
那么,这个元标签只对移动设备有用吗?或者这是必要的?对于移动设备,视口是否使用默认的宽度或高度?
发布于 2019-04-17 07:29:29
当未定义元标记时,将定义虚拟视图端口默认值。非移动优化的网站与这些默认的金库在一般情况下看起来更好的窄屏幕设备。
在Safari iOS上,默认宽度为980像素,而其他浏览器的宽度大小相同或稍小一些。
窄屏幕设备(如手机)在虚拟窗口或视图中呈现页面,通常比屏幕更宽,然后缩小呈现结果,这样就可以同时看到所有的页面。然后,用户可以浏览和缩放页面的不同区域。
例如,如果移动屏幕的宽度为640 to,则可以使用980 to的虚拟视图来呈现页面,然后将其缩小到640 to空间中。
Apple作为viewport的发明者说,默认的视口设置是:默认宽度为980像素。但是,这些默认设置可能不会很好地应用于您的网页,特别是当您正在为特定设备定制网站时。
发布于 2019-04-17 06:30:10
这是在各种移动优化网站中使用的常见视口设置。
宽度属性控制视图端口的大小。可以根据CSS像素将其设置为特定值(“width=600”)
。在这里,它被设置为一个特殊的值(“width= device-width”)
,它是以CSS像素表示的设备的宽度,其比例为100%。第一次加载页面时,初始缩放属性控制缩放级别.
注意:元标记应该添加到HTML文档中的head标签中。
响应标签具有以下属性:
宽度:设备虚拟视图的宽度。
高度:设备虚拟视图的高度。
第一次访问页面时,initial-scale:缩放级别。
用户可以缩放页面的minimum-scale:最小缩放级别。
maximum-scale:用户可以缩放页面的最大缩放级别。
user-scalable:标志,它允许设备放大或缩小。(value=是/否)
参考文献:https://www.geeksforgeeks.org/html-viewport-meta-tag-for-responsive-web-design/
https://stackoverflow.com/questions/55721175
复制相似问题