<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">用处

来源:互联网 发布:单片机是什么专业 编辑:程序博客网 时间:2024/06/06 01:05

一:meta name=”viewport”

手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

二:content=”width=device-width, initial-scale=1

让页面适应手机的宽度,其中: width=device-width :表示宽度是设备屏幕的宽度 initial-scale=1.0:表示初始的缩放比例

三:shrink-to-fit=no

在iOS9中要想起作用,得加上”shrink-to-fit=no” ,原因如下
Viewport meta tags using “width=device-width” cause the page to scale down to fit content that overflows the viewport bounds. You can override this behavior by adding “shrink-to-fit=no” to your meta tag as shown below. The added value will prevent the page from scaling to fit the viewport.

阅读全文
0 0