HTML5学习总结-番外05 移动终端适配

一 viewport

　　在使用移动端设备浏览网页时，移动端浏览器是直接把整个页面放到一个虚拟的视图里来显示的，通常来说这个虚拟的视图大小会比手机屏幕大，用户可以通过手势操作来平移、缩放这个视图。

　　如果不加view标签，那么输入以下代码，查看页面，会发现页面是可以缩放的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                  100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

1 禁用viewport缩放功能
　　在页面头部加上如下语句来禁用viewport的缩放特性，那么页面就不可以缩放了。

　　viewport的更详细信息可以参考 Configure Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

　　完整代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
        <title></title>
        <style>
            div {
                 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>

    <body>
        <div></div>
    </body>

</html>

　　如上我们viewport初始化时便适配设备浏览器的宽度，且无法缩放，该meta标签具体参数如下：

width：viewport 的宽度，可以指定一个固定值，如650；或者可以是device-width，表示设备的宽度。
height：和 width 相对应，可指定高度。
initial-scale：页面初始缩放比例(0-1)
maximum-scale：允许用户缩放到的最大比例(0-1)
minimum-scale：允许用户缩放到的最小比例(0-1)
user-scalable：用户是否可以手动缩放（yes/no）

2 CSS3 media queries响应式布局

可以使用media标签在不同分辨率下的移动设备使用不同的样式，语法如下。具体可以参考另外一篇博客响应式布局

参考资料：

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html