javascript - 如何在PC端打开移动端页面时不会放大
PHPz
PHPz 2017-04-11 12:56:42
0
5
731

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

PHPz
PHPz

学习是最好的投资!

全部回复(5)
迷茫
body max-width margin:0 auto
body内的容器也是max-width 加overflow:hidden margin:0 auto

自己打开F12看就行了

Ty80

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


what?这个都有人踩?

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

左手右手慢动作

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

黄舟

设置max-width
还以试试@media

黄舟

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


图2:

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

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板