viewport 視口(可視區視窗)設定詳解
當我們試圖在iphone中輸出螢幕寬度的時候，會發現螢幕寬度是980，居然和pc螢幕寬度差不多大
蘋果主導的這些手機廠商，為了使使用者獲得完整的web體驗，很多裝置都會欺騙瀏覽器返回乙個數值較大的視口，告訴瀏覽器，別以為我身子小，但是我想以980px寬度顯示這個頁面（解析度和視口沒有關係（開發中根據視口來算的））
視口對於我們實現響應式是很不方便的。980太大了，不符合我們心中的期待，我們心中認為手機螢幕尺寸應該在320到400之間
預設不設定viewport一般可視區寬度在移動端是980，所有的手機響應式**，都要加上meta viewport視口約束標記
解決這個問題只要約束視口即可：
<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)
initial-scale=1.0 命令視口預設的縮放等級為1（可以設定為任何數字，以倍數計算，ios10沒效果）
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:[email protected]"
>請傳送郵件
a>
移動端頁面開發常見的一些問題（開發之前需要先重置以下樣式）
清除input，a，button等標籤的點選陰影
在移動端input，a，button這三個標籤點選的時候都會預設有陰影，那麼怎麼去掉或者替換其他的陰影樣式呢，可以使用下面這個屬性進行設定（下面是去除陰影）
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
<style
>
a, input,
button
style
>
<
body
>
<
a href
="">妙味課堂-我是莫濤
a>
<
input
type
="button"
value
="按鈕"
>
body
>
清除按鈕的圓角
在移動端input和button這兩個標籤都會預設有圓角，可以使用下面兩個樣式去除
input,}
<style
>
a, input,
button
input,
button
style
>
<
body
>
<
a href
="">妙味課堂-我是莫濤
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
body
.wrap
header
section
style
>
head
>
<
body
>
<
div
class
="wrap"
>
<
header
>我是乙個頭部
header
>
<
section
>
頁面內容
<
br/>
section
>
div>
body
>
html
>
移動端開發的一些問題
解惑好文 移動端h5頁面高畫質多屏適配方案 對比了下文章和公司目前狀況，關於清晰度這一點，公司沒有這方面的要求，我們也沒有做這麼複雜，所有一律用 2x。我確實已經遭遇過好幾次還原度不高的問題，一度覺得很費解，我實話我真的看不出來還原度有多麼的不高。dpr在移動端開發中應該是需要特別注意的一點，dpr...
移動端的一些坑
1rem大小的設定，1rem 100px html media screen and min width 320px media screen and min width 375px media screen and min width 414px media screen and min widt...
移動端開發的一些技巧總結 2
總結一下一些知識。1.利用css穿透 常見發生場景 假如我們需要通過input，type file 來上傳檔案，而這個input的預設樣式，可以說是非常地 不人道 所以我們希望通過一張，與這個input大小一樣，位置一致地蓋在上面。這個時候，顯然，這個時候點選，input是不會起作用的。就是因為im...