移動端頁面相容性解決方案

一, css部分

1,meta標籤

maximum-scale=1, minimum-scale=1, user-scalable=no"/>移動端加上這個標籤才是真正的自適應，不加的話，假如你把乙個980px寬度(手機端常規是980)的pc網頁放在手機上顯示，倒也能正常顯示不出現滾動條，不過是移動裝置對頁面做了縮小優化，所以字型等都相應縮小了（980px是相對於手機畫素的，我的是超過1000px多一些就出現滾動條了，這個沒具體研究）。

關於 initial-scale=1 ，這個參照iphone5的尺寸320*568，如果你頁面按照640*1136做的話，scale就設為0.5

忽略識別email

2,body如果設定height:100%;overflow:hidden是依然可以滑動的，如果需禁止，要再加一層div設定 height:100%加overflow：hidden（html,body加height:100%），這樣元素超出body的高度也不能滑動了 html,body

3,做全屏顯示的時，一般為了相容大部分的手機，尺寸一般設為640*960

4,去除webkit的滾動條

element::-webkit-scrollbar；

b, img

9, 在ios中，當你點選比如 input 準備輸入時，虛擬鍵盤彈出，整個視窗的高度就會變為減去鍵盤的高度，加入你在底部有fixed的元素比如btn，這個元素就會跑上來，一般都不會太美觀。我是當focus時就把它設為absolute，視情況而定

10,如果想改變 placeholder 裡的樣式，需要用css偽類。如 ::-webkit-input-placeholder

11, 使用rem時，設某個div比如的height:3rem;line-height:1.5rem;overflow:hidden;時，在某些android手機上可能會出現顯示不止兩行,第三行會顯示點頭部。解決：利用js獲取文字line-height再去設定div高度

二, js部分

1,preventdefault() 方法阻止元素發生預設的行為（例如，當點選提交按鈕時阻止對表單的提交）。

用e.preventdefault()會阻止的scroll，click等事件

2,html5的新js api有新的選擇器，比如queryselector(".class #id")和queryselectorall(".class element")。

3,點選乙個元素時，使用touchstart會立即觸發，而使用click則用有大概0.3s的延遲

4,判斷手機的型別

window.onload =function ()  
else
if (n.indexof('
iphone
') > -1
) else
if (n.indexof('
windows phone
') > -1
) 
else
if (n.indexof('
google phone
') > -1
) }

function isbrowser() 
//qq內建瀏覽器
elseqq'
) 
//chrome
else
if(useragent.match(/chrome/i) == '
chrome') 
//opera
else
if(useragent.match(/opera/i) == '
opera') 
//firefox
else
if(useragent.match(/firefox/i) == '
firefox') 
//safari
else
if(useragent.match(/safari/i) == '
safari') 
//ie
else
if(!!window.activexobject || "
activexobject"in
window) 
else
}

移動端頁面相容性解決方案

css移動端相容性解決方案

XHTML CSS相容性解決方案

XHTML CSS相容性解決方案小集

移動端頁面相容性解決方案

css移動端相容性解決方案

XHTML CSS相容性解決方案

XHTML CSS相容性解決方案小集

相關推薦