如何在PC端打开移动端页面时不会放大

Question

我写了个移动端的页面，有添加
<meta name="viewport" content="width=device-width,initial-scale=1.0">
现在想在PC端打开，如何设置最大宽度，不让页面放大，类似http://m.yougou.com/这样

Answer 1

body max-width margin:0 auto
body内的容器也是max-width 加overflow：hidden margin:0 auto

自己打开F12看就行了

Answer 2

当然是设置页面的宽度啦width,max-width。
你提供的这个页面将最大宽度设置为了max-width: 640px;。

---

what？这个都有人踩？

在提供一个m.taobao.com实例

Answer 3

用js判断可以不？修改默认基数

Answer 4

设置max-width
还以试试@media

Answer 5

先放两张图示意我的做法：
图1：

图2：

• 用不用rem不是关键，我这个页面是用了vue+weui搭建的，因为加了viewport，css单位全部使用px，并没有使用rem布局。

• 只要你加了viewport，移动端的1px==pc端的1px

• 由于weui本事用了自适应布局，我就只是简简单单把内容包装在一个div里面，然后使用@media查询页面宽度，当查到页面的宽度是移动端的[即页面宽度小于768px]的时候，将那个div全屏。否则则将该div的宽度设置为768px[ipad的宽度]，然后里面的内容自适应。