移动设备上的视口问题

Viewport issue on mobile devices

本文关键字：视口问题移动更新时间：2023-09-26

我有一个问题正在努力克服。我部署了我的网站，注意到Android设备上STOCK浏览器的视口逻辑被破坏了。Chrome浏览器在同一台安卓设备上运行。此外，iphone6可以工作，但iphone5不行。我正在根据屏幕的宽度动态地确定视口值。

以下是该网站的测试版本：http://spaniard.ca/workVersions/beta/index.html

我无法改变设计和布局，网站需要像现在这样居中。

有人知道为什么在安卓股票浏览器上它不起作用，但在同一设备上的chrome上会起作用吗？

任何事情都会有帮助的，谢谢！

如果英雄图像是一个实际的img标签而不是背景图像，那么您将更容易进行响应布局。您可以通过添加CSS:使背景图像不被裁剪

background-size:contain;

顺便说一句，您需要确保文章#what is spaniard中包含的元素具有百分比宽度。

编辑：据我所见，这不是浏览器的问题，只是缺少正确的代码

在没有看到代码的情况下提供解决方案非常困难。仍在给你解决问题的建议。

只是个主意。尝试更改CSS中的背景大小如下：-

背景尺寸：封面；