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