如何让pc端网站在手机上可以等比缩放的整个显示

Question

平时注意到有些网站初衷是为pc端设计的，在移动端打开是等比缩放的效果，如下：

它的head标签内容是如下：

而有的网站同样是在pc端显示，但是手机上打开是如下的情况：

它的head标签内容是如下：

这是什么原因呢？怎样才能做到第一种情况，毕竟可以整体展示了整个网页的内容。
我看第一种情况下也不是所有的元素的宽度用的是百分比，也有很多的宽度是写死的，如下：

Answer 1

页面HEAD里加上 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Answer 2

其实 主要是看人家的产品的需求了

我看到你的第一个页面 感觉第一个页面 要不就是按照百分比做的
要不就是真的没有加<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">标签

第二个页面 明显加了<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">标签
而且他就是按px做的网页

最后
如果你想实现在pc端的页面也可以在手机端显示
那可以试试rem单位 或者流式布局 即百分比的形式
但是 rem不支持IE10以下
所以一般用在手机端

感觉还是具体终端具体解决吧 会省心很多

Answer 3

你好，请问这个问题你解决了吗，

Answer 4

其实只要把 initial-scale=1.0 这个去掉就可以实现你想要的效果了

Answer 5

测试了一下，不改变 viewport 的值就可以了。如：

<-- 宽度默认宽度，不支持用户缩放 -->
<meta name="viewport" content="width=width,user-scalable=no">
<-- 宽度默认宽度，不支持用户缩放 -->
<meta name="viewport" content="user-scalable=no">
<-- 宽度默认宽度，支持用户缩放 -->
<meta name="viewport" content="user-scalable=yes">

后者的内容也解释一下好了：

<-- 宽度为设备宽度，初始缩略比例为原始大小，不支持用户缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

Answer 6

viewport最开始是苹果提出来的，其他厂商效仿之。在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

Answer 7

你好 那个你之前说的PC端页面同比例在手机端缩放显示 那个页头注释之后是有效果 可是 @media就不起作用了 问下怎么解决的