一、設定meta標籤
<meta
name
="viewport"
content
="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no;"
/>
見文知意
<
meta
name
content
="yes"
/>
允許全屏模式瀏覽
<
meta
name
content
="black"
/>
狀態條樣式
<
meta
name
="format-detection"
content
="telephone=no"
/>
忽略數字識別為**號碼
<
meta
name
="format-detection"
content
="email=no"
/>安卓自動禁用，ios不會自動識別郵件位址
<二、使用百分比布局，使用rem單位和mediaquerymeta
name
="viewport"
content
=" height = [ pixel_value |device-height] ,
width = [ pixel_value |device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable =[yes | no] ,
target- densitydpi = [ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] "
/>
html @media only screen and (min-width: 481px)}meidaquery可用直接用在樣式表裡，也可以用在link標籤中；@media only screen and (min-width: 561px)}
@media only screen and (min-width: 641px)}
<為提高頁面適應性，可以使用百分比布局、設定box-sizing屬性、使用display:table-cell**布局等方法；常見布局方式：流體布局，固定布局，**布局，百分比布局，混合布局，彈性布局等。link
rel="stylesheet"
media
="all and (orientation:portrait)"
href
="portrait.css"
>
// 肖像模式樣式
<
link
rel="stylesheet"
media
="all and (orientation:landscape)"
href
="landscape.css"
// 風景模式樣式
//豎屏時使用的樣式
="all and (orientation:portrait)"
type
="text/css"
>
#landscape
style
>
//橫屏時使用的樣式
<
style
media
="all and (orientation:landscape)"
type
="text/css"
>
#portrait
style
>
三、**螢幕
dpi怎麼計算呢？dpi也叫ppi。
ppi：ppi全稱為pixel per inch，譯為每英吋畫素取值，更確切的說法應該是畫素密度，也就是衡量單位物理面積內擁有畫素值的情況。
畫素：120-160屬於低分屏；
160-240屬於中分屏；
240-320屬於高分屏；
320以上資料超高分屏，也就是傳說中的retina螢幕；
#header @media screen and (- webkit -device-pixel-ratio:1.5) }@media screen and (- webkit -device-pixel-ratio:0.75) }
移動端web開發
viewport content width device width,user scalable no,initial scale 1.0,maximum scale 1.0,minimum scale 1.0 width 設定視口寬度 initial scale 初始化縮放比，大於0的數字 ma...
移動端Web開發
移動端web開發與pc端的web開發有尺寸上的不同，手機螢幕大小有很多種，因此尺寸方面有些要注意的。1.字型 採用js動態設定字型大小的方法 思路如下 螢幕寬度 640px,則font size 100px 螢幕寬度 640px,則font size 100 寬度 640px 字型單位為rem 在b...
移動端web開發
互動優化 1px dpr dpr dp viewport使手機瀏覽器先排版正確再縮放 移動web最佳設定 viewport content width device width,initial scale 1,user scalable no 相容性問題根據html的font size，基值設dev...