1.首先說滾動條

移動端開發在不設定任何適配和viewport寬度的情況下，以iphone5為例：螢幕介面的邏輯解析度是320x568，在谷歌瀏覽器的介面下螢幕的可視寬度是980px（谷歌設定的，每個瀏覽器寬度不一樣）,
所以介面如果是980可以橫向鋪滿全屏：

如果超過980就會出現滾動條.比如介面寬度是1200：

所以螢幕出現滾動條很大可能是 viewport設定不對或者未配置這個屬性（滾動條一般取決於viewport 裡面的寬度設定，如果沒有配置viewport裡面的寬度，並且介面寬度超出瀏覽器預設的可視寬度就會出現滾動條），如果加上這個標籤""，移動端瀏覽器的可視寬度就 = 移動端的邏輯畫素；所以設定後HTML的寬度就是320px了，所以裡面寬度是320px的DIV可以填充整個螢幕寬度了。

超出就會出現滾動條了：

當然只設置“initial-scale=1”效果和 “width=device-width”一樣的

2.再說PC介面在移動端被縮放

還是以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倍）

3.關於裝置畫素比(device pixel ratio)簡稱dpr

dpr = 物理畫素 / 邏輯畫素，這個比例不是控制介面在不同移動端下的大小縮放的，dpr不會改變介面內容的大小，改變的是清晰度，相當於相同長寬大小下1px（pc畫素）代表多少畫素（螢幕物理畫素）的比例，相當於螢幕清晰度的比例，在不同的螢幕上，CSS畫素所呈現的物理尺寸是一致的，而不同的是CSS畫素所對應的物理畫素具數是不一致的。在普通螢幕下1個CSS畫素對應1個物理畫素，而在Retina螢幕（dpr=2）下，1個CSS畫素對應的卻是4個物理畫素，所以相同大小下的DIV更加清晰。
詳細參考：

4，怎麼算出來的font-size

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，即一倍屏兩倍屏的問題。
http://mobile.51cto.com/web-484304.htm

備註：
每個瀏覽器對最小font-size的支援，不盡相同。js動態計算的font-size值太小時，會導致超小屏上UI顯示效果比預想中的偏大。
比如，font-size計算是10px，但是chrome只支援到12px，他就按照12px去渲染了，這就會導致UI偏大了。（上面方案中的100px肯定是沒有問題的）
具體表現：