为什么移动浏览器完全放大我的页面?

我目前正在为一个客户(仍在进行中的工作)的网站上工作,并试图解决网站上的一些移动问题。

我遇到的主要问题是移动浏览器(android + iphone)在网站的左上部分放大网站。 我希望缩小到适合视口的整个站点宽度,无论视口的宽度如何。

该网站可以在这里查看: http : //www.graceprep.com

有这个简单的解决办法吗? 我对HTML / CSS有丰富的经验,但在移动浏览器方面我还是个新手。

这是我的header.php文件中的一些HTML可能是相关的。 我试图改变宽度属性无济于事。 初始规模的财产是有效的,但太广泛 – 我希望该网站对所有的移动浏览器,无论是方向或屏幕大小完全缩小。

有没有办法做到这一点?

Solutions Collecting From Web of "为什么移动浏览器完全放大我的页面?"

为什么你有这个meta标签呢? 如果将其完全移除,设备将自动决定缩放级别。

我几乎是积极的

<meta name="viewport" content="width=device-width, initial-scale=1"> 

应该解决这个问题。 您可以将“宽度”设置为您想要的任何值,但通过将其设置为设备宽度,它将调整为任何设备的像素宽度值。 “初始缩放”控制指定宽度的缩放级别。

看来,大多数移动浏览器倾向于传递比移动宽度宽得多的默认视口宽度。 例如,iOS Safari假设网页宽度为980像素,并缩小以适应整个iPhone 4 320px( https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the- viewport-meta-tag-webdesign-5972 )。 Android浏览器倾向于适应800至1024像素的CSS宽度( https://developers.google.com/speed/docs/insights/ConfigureViewport )。

预期的宽度似乎以某种方式沟通之前元标记实施,所以在某些情况下设置宽度的宽度设备,然后似乎被视为放大英寸除非您的网页上的CSS使用媒体查询来适应设备的实际宽度,在我看来最好避免丢失值的“width = device-width”部分,并设置其他约束条件。