最近剛開始做移動端頁面，遇到了不少bug，說一下解決移動端不同螢幕頁面的適應問題。
1. viewport屬性及html頁面結構
// width 設定viewport寬度，為乙個正整數，或字串『device-width』
// height 設定viewport高度，一般設定了寬度，會自動解析出高度，可以不用設定
// initial-scale 預設縮放比例，為乙個數字，可以帶小數
// minimum-scale 允許使用者最小縮放比例，為乙個數字，可以帶小數
// maximum-scale 允許使用者最大縮放比例，為乙個數字，可以帶小數
// user-scalable 是否允許手動縮放
需要在每乙個頁面頭都加上這句話。這裡面關於maximun-scale的取值網上有幾種不同說法。有人建議用1.3，公司這邊用的1.5。可能是我沒有理解什麼是允許使用者最大縮放比例吧，博主放到真機上測試發現1.0，1.3，1.5沒有什麼區別。下面po乙個網上建議用1.3的理由吧：
為什麼是1.3？
目前大部分頁面都是以320px為基準的布局，而iphone6的寬度比是375/320 = 1.171875，iphone6+則是 414/320 = 1.29375那麼以1.29倍也就約等於1.3了。
2. 螢幕自適應（賊好用的絕招）
3. iphone4/iphone5/iphone6/iphone6p 的css media query
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2)
}@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2)}
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2)
@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3)
再分享乙個很全的螢幕樣式media
移動端bug收錄：
移動端h5頁面適配
一直對h5頁面充滿崇敬,揣著忐忑的心開始了我的h5之旅。才發現直接照抄網上的方案是很容易,但是想真的了解內部的原理,這就給我了乙個下馬威了.通過在網上各種找資料,才將各種概念以及原理了解清楚.故寫下這篇文章用於積累知識,如有問題,歡迎指正 先來看看很多資料上面的描述 它是物理概念，指的是裝置中使用的...
移動端H5頁面適配
廢話不多說，直接上 以下例子均以ui設計圖為750px寬度作為標準進行轉換 1.rem加js適配 用原生方法獲取使用者設定的瀏覽器的字型大小 相容ie 心。該醫院初期主要研究女性性反應方面問題，後逐漸將女性盆骨健康問題和如何提高性功能也作為院內主要診療專案。醫院憑藉精湛的手術技術和出色的手術效果，在...
h5頁面的寫法 移動端h5頁面寫法
1.頁面寬度320，所有元素尺寸設一半 缺點 不自能適應全屏 2.頁面寬度640，元素尺寸正常 暫未發現問題 3.頁面寬度640，js控制自適應全屏 adaptuilayout.adapt initviewportwidth 缺點 qq空間分享後點開頁面套在qq預設瀏覽器裡有相容性問題 4.rem寫...