关于移动端布局问题。

Question

我使用的是固式布局设置了宽度为640px设置了禁止缩放，为什么在谷歌浏览器中模拟手机看还是网页显示不全呢？谢谢

Answer 1

你有写 meta viewport 头部标签吗

Answer 2

看截图中的容器很明显大于640的，而你的内容设置了宽度640
这肯定会出现不宽度不占满的情况~

Answer 3

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, target-densitydpi=medium-dpi, user-scalable=no">

Answer 4

在head里面加上这句<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, target-densitydpi=medium-dpi, user-scalable=no">,
这样，移动端的1px跟pc端的1px是相等的，都是1逻辑像素。

对于移动端布局，个人建议，再加上viewport之后，高度使用px单位，宽度使用%单位，再加上@media媒体查询进行细节微调，这样的好处在于：

• 自适应各种尺寸的手机

• 不怕某些移动端浏览器呼出键盘对页面高度进行压缩

• 使用px贴近设计稿

======2016年9月6日23:36:39补充=======
补充一下，对于移动端来说，还可以使用rem作为高度单位。
在css里面设置

    html{font-size:18px}

这样，1rem=18px;
配合媒体查询，动态修改font-size的大小，可以稍微地固定下元素的高宽比
比如：

    @media screen and (width:768px){
        html{
            font-size:76.8px
        }
    }
    @media screen and (width:320px){
        html{
            font-size:32px
        }
    }
    img{
        width:100%;
        height:10rem;
    }

不过手机尺寸各不相同，所以不可能将所有宽度都列出来，所以只能在一定范围内稍微地修改