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

时间 2019-11-17

标签 html5 html 学习总结移动终端适配栏目 HTML5 繁體版

原文原文链接

一 viewport

　　在使用移动端设备浏览网页时，移动端浏览器是直接把整个页面放到一个虚拟的视图里来显示的，一般来讲这个虚拟的视图大小会比手机屏幕大，用户能够经过手势操做来平移、缩放这个视图。html

　　若是不加view标签，那么输入如下代码，查看页面，会发现页面是能够缩放的。浏览器

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

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

　　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" />

　　完整代码以下：spa

<!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 {
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>

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

</html>

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

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响应式布局code

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

参考资料：blog

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