移動設備上的視口問題

Question

我有一個我正在努力克服的問題。 我部署了我的網站，並注意到 Android 設備上的 STOCK 瀏覽器的視口邏輯被破壞。 同一 Android 設備上的 Chrome 瀏覽器工作正常。 另外，iphone6 可以工作，但 iphone5 不行。 我根據屏幕寬度動態確定視口值。

這是該站點的測試版本： http : //spaniard.ca/workVersions/beta/index.html

我不能改變設計和布局，網站需要像現在一樣居中。

有誰知道為什么在 android 股票瀏覽器上它不起作用，但在同一設備上的 chrome 上會？

任何事情都會有所幫助，謝謝！

Answer 1

如果英雄圖片是一個實際的 img 標簽而不是背景圖片，那么你可以更輕松地進行響應式布局。 您可以通過添加 CSS 使背景圖像不被裁剪：

background-size:contain;

附帶說明一下，您需要確保 article#what-is-spaniard 中的包含元素具有百分比寬度。

編輯：據我所知，這不是瀏覽器的問題，只是缺少正確的代碼

Answer 2

在不看代碼的情況下提供解決方案非常困難。 仍然給你一個解決它的建議。

只是一個想法。 嘗試在 CSS 中更改背景大小，如下所示：-

背景尺寸：封面；