作者meisheep (Matt)
看板Web_Design
标题[问题] 以行动装置浏览bootstrap网页被放大
时间Sun Mar 9 03:18:04 2014
标题下的有点怪，因为我还没找出问题出在哪里 囧
目前我用bootstrap 3.1.1模板尝试开发行动网页，
当然为了也要符合桌机浏览的需求，
我打算先以桌机的版面做开发，再开始做responsive。
桌机版面做好後，我将chrome视窗缩放开始做第一层responsive，
结果在桌机上浏览均正常，在行动装置版面就乱掉
http://ppt.cc/7Zx1
（左桌机，右行动装置，解析度设置的跟行动装置宽度相同）
很明显看到在行动装置上taichung字体过大超出div，导致全部排版都乱掉，
但我一直不解的是为何同解析度下在行动装置上却会出问题。
一开始我以为是字型px和pt的问题，尝试过後无效。
viewport设置应该也没问题，如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
後来我发现在电脑上把网页缩放到200%，看起来就跟行动装置上出的问题一样。
看来是网页到了行动装置上都被放大两倍了，ios和android皆测过都有同样问题。
目前仍找不到问题出在哪，我也怀疑是不是bootstrap做了什麽responsive，
但回头苦看原始码仍看不出个所以然QQ
麻烦各位了，谢谢><
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 114.35.82.187
1F：推 Fantasywind:width=device-width; initial-scale=1.0 是分号 03/09 04:32
感谢你的回覆，不过好像不是分号的问题，
我发现分号和逗号两种都有人用，并且我试过都没有任何问题。
目前我大概找到原因，但还无良好解决方案：
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
参见A pixel is not a pixel那段。
大致上是原本设定的px在装置上会被放大1.5倍，
我回头设定initial-scale=0.66，果然跟电脑呈现的版型一模一样。
另外奇妙的是，
HTC new One、iPhone 5s皆有此问题
Sony Z却能完美呈现
（@initial-scale=1）
※ 编辑: meisheep 来自: 114.35.82.187 (03/09 13:17)
2F：推 Fantasywind:那就是之前很热门的 8px 问题 虽然不少争议参考看看吧 03/10 00:07
3F：推 EROS4:改 body 的 font-size 可以解决吧？另外3.0 的 RWD 是 mobil 03/13 02:03
4F：→ EROS4:是 mobile first，你应该先做行动版的 03/13 02:04