pixel與point比值稱為device-pixel-ratio，普通裝置都是1，iphone 4是2，有些android機型是1.5。]
那麼-webkit-min-device-pixel-ratio:2可以用來區分iphone(4/4s/5)和其它的手機
iphone4/4s的解析度為640*960 pixels，dpi為是320*480，裝置高度為480px
iphone5的解析度為640*1136 pixels，dpi依然是320*568，裝置高度為568px
iphone6的解析度為750*1334 pixels，dpi依然是375*667，裝置高度為667px
iphone6 plus的解析度為1242x2208 pixels，dpi依然是414*736，裝置高度為736px
方式一，直接寫到樣式裡面
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2)
}@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2)
}/* 或者以寬度為準 */
@media all and (max-width:320px)
}@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2)
}@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2)
}/* 或者以寬度為準 */
@media all and (min-width:414px)
}
//通過高度來判斷是否是iphone 4還是iphone 5或iphone 6、iphone6 plus
isphone4inches = (window.screen.height==480);
isphone5inches = (window.screen.height==568);
isphone6inches = (window.screen.height==667);
isphone6pinches = (window.screen.height==736);
cover: the web content should fully cover the viewport. 網頁內容完全覆蓋可視視窗
auto: the default value, 同contain的作用
通過給頁面設定viewport-fit=cover，可以將頁面的布局區域延伸到頁面頂部和底部，但這樣也會有問題
可以在h5頁面鏈結乙個iphonex.css來給iphone x訪問的頁面增加對應的適配層
@media only screen and (device-width: 375px) and (device-height: 812px) and
(-webkit-device-pixel-ratio: 3)
}/*增加底部適配層*/
.has-bottombar
}/*導航操作欄上移*/
.bottom-menu-fixed
}
瀏覽器CSS相容
一 important 在ie6及ff中的使用 box1 box1 important是說這個設定有優先順序，ie碰到 important不會出錯只是忽略他的功能，假如後面又設定了width，ie會以最後設定的 width為準，假如後面再沒有其它設定，則會用當前這個值，也就是前面的 importan...
手機適配，瀏覽器相容
開發的時候看到了這兩行 查了一下作用然後記錄下來。如果支援google chrome frame gcf，則使用gcf渲染 如果系統安裝ie8或以上版本，則使用最高版本ie渲染 否則，這個設定可以忽略。width viewport的寬度 height viewport的高度 initial scal...
CSS相容不同瀏覽器
製作頁面的時候，由於瀏覽器的不同，對css的解析也會有所不同，從而達不到我們預期想要的頁面效果，這個時候我們就需要針對不同的瀏覽器去寫不同的css，讓它能夠同時相容不同的瀏覽器。css hank。原始 歡迎光臨！減號是ie6專有的hack 9 ie6 ie7 ie8 ie9 ie10都生效 0 ie...