移動端頁面開發的一些經常使用的設置

時間 2019-12-19

標籤移動頁面開發一些經常使用設置欄目無線简体版

原文原文鏈接

viewport 視口(可視區窗口)設置詳解css

當咱們試圖在iPhone中輸出屏幕寬度的時候，會發現屏幕寬度是980，竟然和pc屏幕寬度差很少大html

蘋果主導的這些手機廠商，爲了使用戶得到完整的WEB體驗，不少設備都會欺騙瀏覽器返回一個數值較大的視口，告訴瀏覽器，別覺得我身子小，可是我想以980px寬度顯示這個頁面（分辨率和視口沒有關係（開發中根據視口來算的））web

視口對於咱們實現響應式是很不方便的。980太大了，不符合咱們心中的期待，咱們心中認爲手機屏幕尺寸應該在320到400之間瀏覽器

默認不設置viewport通常可視區寬度在移動端是980，全部的手機響應式網站，都要加上meta viewport視口約束標記app

解決這個問題只要約束視口便可：ide

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

一個id和name爲 viewport的meta元標記，就表示如今要約束視口了字體

那麼具體約束的規則寫在content中，每一個約束規則用逗號隔開：網站

width=device-width　　　　命令視口的寬度，變爲設備的寬（以1024*768屏幕爲標準 iPhone等手機一般爲320到380之間），(number||device-width)spa

initial-scale=1.0　　　　　　命令視口默認的縮放等級爲1（能夠設置爲任何數字，以倍數計算，IOS10沒效果）scala

minimum-scale=1.0　　　　命令視口最小縮放等級爲1（能夠設置爲任何數字，以倍數計算，IOS10沒效果）

maximum-scale=1.0　　　　命令視口最大縮放等級爲1（能夠設置爲任何數字，以倍數計算，IOS10沒效果）

user-scalable=no　　　　　　不容許用戶縮放頁面(yes||no)（能夠設置爲任何數字，以倍數計算，IOS10沒效果）

其餘的一些設置

強制橫屏或者豎屏設置（X5內核的瀏覽器才支持）

能夠設置爲protrait（豎屏）和andscape（橫屏）

<meta name="x5-orientation" content="portrait" />

設置全屏（X5內核有效）

<meta name="x5-fullscreen" content="true" />

UC瀏覽器強制豎屏或者橫屏顯示

能夠設置爲protrait（豎屏）和andscape（橫屏）

<meta name="screen-orientation" content="portrait">

UC全屏顯示

<meta name="full-screen" content="yes">

其餘瀏覽器下若是要屏蔽橫屏顯示的功能，可使用陀螺儀的方法來作，具體查看：移動端頁面的陀螺儀操做這篇文章

<meta name="format-detection" content="telephone=no, email=no" />

禁止移動端電話號碼和郵箱的識別

<meta name="format-detection" content="telephone=no, email=no" />

上面的設置是全局設置，若是說頁面中有一個地方須要識別電話號碼和郵箱那麼可使用下面這樣設置

<a href="tel:18888888888">請撥打電話18888888888</a>
<a href="mailto:motao@motao.com">請發送郵件</a>

移動端頁面開發常見的一些問題（開發以前須要先重置如下樣式）

清除input，a，button等標籤的點擊陰影

在移動端input，a，button這三個標籤點擊的時候都會默認有陰影，那麼怎麼去掉或者替換其餘的陰影樣式呢，可使用下面這個屬性進行設置（下面是去除陰影）

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

<style>
    a,
    input,
    button{
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
</style>
<body>
    <a href="http://miaov.com">妙味課堂-我是莫濤</a>
    <input type="button" value="按鈕">
</body>

清除按鈕的圓角

在移動端input和button這兩個標籤都會默認有圓角，可使用下面兩個樣式去除

input, 
button {
    -webkit-appearance: none;
    border-radius: 0;
}

<style>
    a,
    input,
    button{
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    input,
    button {
        -webkit-appearance: none;
        border-radius: 0;
    }
</style>
<body>
    <a href="http://miaov.com">妙味課堂-我是莫濤</a>
    <input type="button" value="按鈕">
</body>

選中文字設置（設置爲不選中）

安卓不兼容這個屬性，可使用事件來兼容

-webkit-user-select: none;

禁止文字縮放

-webkit-text-size-adjust: 100%;

默認字體設置

由於移動端，每一個手機默認的字體都不同，因此須要重置一下，至於重置什麼樣的字體本身來定

font-family: Helvetica;

Font Boosting

在一段文字咱們沒有給他設置高度的時候，在webkit內核下，文字的大小被瀏覽器放大了，解決辦法:設置高度或者設置最大高度max-hieght

固定定位在移動端的問題

移動端IOS回彈的問題

IOS下overflow的問題

就是是說body下某個元素超過頁面寬度後，即便body設置了overflow爲hideen，在IOS下也沒有用，解決辦法就是將body下的全部子元素包裹在一個div上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <title>Document</title>
    <style type="text/css">
        html {
            height: 100%;
            overflow: hidden;
        }
        body {
            height: 100%;
            margin: 0;
            overflow: hidden;
            position: relative;
        }
        .wrap {
            height: 100%;
            overflow: auto;
        }
        header {
            position: absolute;
            width: 200%;
            height: 40px;
            background: rgba(0, 0, 0, .5);
            color: #fff;
            text-align: center;
        }
        section {
            padding-top: 40px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <header>我是一個頭部</header>
        <section>
            頁面內容<br/>
        </section>
    </div>
</body>
</html>