pc的页面怎么等比例缩放到手机上

Question

一个pc的页面怎么等比例缩放到手机上

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=0,user-scalable=yes,maximum-scale=1.0"> 这句代码 可以完美解决 亲测

Answer 2

加上<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
如果你想实现在pc端的页面也可以在手机端显示
那可以试试rem单位 或者流式布局 即百分比的形式
但是 rem不支持IE10以下
所以一般用在手机端

Answer 3

正常浏览器默认就是自动缩放的，只不过不一定缩放的比例正好平铺可能会有水平滚动条，需要你自己右手指缩放下。

---

题主选择的答案的解决方案并不保险，这里就通俗的解释下：

initial-scale=0的情况下缩放到minimum-scale的默认值.25,可以理解为你的布局视口是手机默认视口的4倍大，对于一般手机视口宽度在360px左右这个值就是1440px左右，pc端的布局一般为1200px，相当于把1200px的内容放进1440px的屏幕中。我们知道这种缩小的方案是在没有手机版和响应式的一种简便处理，主要目的是浏览完所有内容即可不需要看清，这里不仅做了缩放而且两侧还相当于有了留白，效果第一个还不错。

但是缩小4倍是概念呢，相当于你pc上的12px字体就只有3px大个人感觉虽然目的就是通过放大来浏览，但是如果初始的时候文字根本看不出大概还是很不好的，而且假如在视口更大的设备上如平板，这个留白也会很夸张。效果就很差了

但是什么都不设置缩放后会不留白第一感不美观。解决办法可以给body设置min-width的值大于页面的宽度一点这样就解决了留白问题。

补充之前说什么都不设置，也是不妥的，时间是如果需要在手机上浏览还是要设置一下

<meta name="viewport" content="width=device-width">

这样做的目的是禁止双击放大以消除300ms延迟，避免点透发生

Answer 4

HTML代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

CSS代码：
大于767px style样式
@media (max-width:767px){} 像素自行修改
大于767px小于1000px
@media (max-width:767px)and(max-width:1000px) {} 像素自行修改

媒体查询使用方法可以百度

Answer 5

在head标签里加这个，<meta name="viewport" content="width=device-width, initial-scale=0,user-scalable=yes,maximum-scale=1.0">