移動端開發在不設定任何適配和viewport寬度的情況下，以iphone5為例：螢幕介面的邏輯解析度是320x568，在谷歌瀏覽器的介面下螢幕的可視寬度是980px（谷歌設定的，每個瀏覽器寬度不一樣）,
所以介面如果是980可以橫向鋪滿全屏：
如果超過980就會出現滾動條.比如介面寬度是1200：
所以螢幕出現滾動條很大可能是 viewport設定不對或者未配置這個屬性（滾動條一般取決於viewport 裡面的寬度設定，如果沒有配置viewport裡面的寬度，並且介面寬度超出瀏覽器預設的可視寬度就會出現滾動條），如果加上這個標籤""，移動端瀏覽器的可視寬度就 = 移動端的邏輯畫素；所以設定後html的寬度就是320px了，所以裡面寬度是320px的div可以填充整個螢幕寬度了。
超出就會出現滾動條了：
當然只設定「initial-scale=1」效果和 「width=device-width」一樣的
還是以iphone5為例，蘋果5用谷歌瀏覽器的話介面預設寬度是980（在不配置viewport的情況下，並且每個瀏覽器標準寬度不一樣），但是蘋果5的邏輯畫素是320x568（邏輯畫素也就是css畫素，或者說是pc螢幕下的畫素），
所以上圖： 乙個pc介面在不新增任何適配和viewport比例等配置，直接拿到移動端顯示，介面會被等比例縮放，例如上圖：乙個寬980px的介面如果放在pc端顯示寬度就是980px，但是拿到移動端顯示的介面鋪滿了320px（pc的畫素或者邏輯畫素）的螢幕（因為在谷歌下瀏覽器預設可視寬度也是980所以可以鋪滿），縮放比例是980/320 = 3.06倍，所以pc端100px的寬度在移動端介面會縮放成32px（100/3.06），總之，pc介面拿到移動端如果沒有設定適配和viewport縮放比例的話介面會被縮小，縮小比例根據瀏覽器的預設的可視寬度來確定（比如谷歌的是980，所以在蘋果5下介面會相對於pc介面被縮小980/320=3.06倍）
同樣想不被縮小，想和pc的寬度一致，也要設定viewport標籤：
或者
dpr = 物理畫素 / 邏輯畫素，這個比例不是控制介面在不同移動端下的大小縮放的，dpr不會改變介面內容的大小，改變的是清晰度，相當於相同長寬大小下1px（pc畫素）代表多少畫素（螢幕物理畫素）的比例，相當於螢幕清晰度的比例，在不同的螢幕上，css畫素所呈現的物理尺寸是一致的，而不同的是css畫素所對應的物理畫素具數是不一致的。在普通螢幕下1個css畫素對應1個物理畫素，而在retina螢幕（dpr=2）下，1個css畫素對應的卻是4個物理畫素，所以相同大小下的div更加清晰。
詳細參考：
font-size = px值 / rem值例如 100 = 750px / 7.5rem
布局排版都用rem做單位，然後不同寬度的屏，js動態計算根節點的font-size。
假設設計稿是寬750px來做的，書寫css方便計算考慮，根節點的font-size假定為100px，得出裝置寬為7.5rem。設計稿中標註的任何px數值都可以換算成px/100的rem值。
就是說，每乙個裝置的寬度都定為7.5個rem，然後寬度非750px的裝置裡，就需要用js對font-size做動態計算，換算關係為：根節點的font-size=裝置寬度/7.5。
（這段理解為：自定義100的font-size，根據設計稿750px的寬來計算出介面的寬就是7.5rem，所以設計稿裡面所有的px都除以100再加上rem單位，然後這個介面拿到其他不同解析度的螢幕下都要首先動態計算font-size，因為之前font-size可以根據750/7.5算出來，所以這個介面假設在375px寬的螢幕下顯示，font-size就是50=375/7.5，這樣font-size和屏寬的比例永遠是7.5，原本在750介面寬度為0.32rem的div（0.32100=32px），移到375的螢幕下，0.32rem沒有變但是font-zise變成了50，所以div寬度變為0.32rem50=16px，相當於這個div根據螢幕縮小一半而縮小一半，這樣就算適配不同螢幕了吧
）7.5這個比例是根據不同的設計稿得到的，比如設計稿是640px，比例就是6.4：
基於iphone4或者iphone5來的，所以它的設計稿豎直放時的橫向解析度為640px，為了計算方便，取乙個100px的font-size為參照，那麼body元素的寬度就可以設定為width: 6.4rem，於是html的font-size=devicewidth / 6.4。這個devicewidth就是viewport設定中的那個devicewidth。根據這個計算規則，可得出本部分開始的四張截圖中html的font-size大小如下：
devicewidth = 320，font-size = 320 / 6.4 = 50px
devicewidth = 375，font-size = 375 / 6.4 = 58.59375px
devicewidth = 414，font-size = 414 / 6.4 = 64.6875px
devicewidth = 500，font-size = 500 / 6.4 = 78.125px
即：document.documentelement.style.fontsize = document.documentelement.clientwidth*(window.devicepixelratio||1) / 7.5 + 'px';
注：需要考慮到dpr，即一倍屏兩倍屏的問題。
備註：每個瀏覽器對最小font-size的支援，不盡相同。js動態計算的font-size值太小時，會導致超小屏上ui顯示效果比預想中的偏大。
比如，font-size計算是10px，但是chrome只支援到12px，他就按照12px去渲染了，這就會導致ui偏大了。（上面方案中的100px肯定是沒有問題的）
具體表現：
從Pc轉向H5開發遇到的適配問題思考
移動端開發在不設定任何適配和viewport寬度的情況下，以iphone5為例 螢幕介面的邏輯解析度是320x568，在谷歌瀏覽器的介面下螢幕的可視寬度是980px 谷歌設定的，每個瀏覽器寬度不一樣 所以介面如果是980可以橫向鋪滿全屏 如果超過980就會出現滾動條.比如介面寬度是1200 所以螢幕...
H5開發螢幕適配
width 設定layout viewport寬度，為乙個正整數，或者device width.height 設定layout viewport高度，為乙個正整數，或者device height initital scale 設定頁面的初始縮放值，為乙個數字，可以帶小數 maximum scale ...
移動h5開發中遇到的問題
1 輸入框觸發輸入法後，完成輸入，頁面不回彈，這在ios手機上很常見，解決辦法是，在輸入法失去焦點是，上讓頁面抖動一下，網上很多的解決辦法，具體就不說了，時機可以自己把握，只要是完成輸入法，就可以讓頁面抖動一下 2 ios上，當用absolute將底部欄定位到底部時，向上拖動頁面，底部欄會跟著網上被...