网站无法在移动设备上正确加载答案

【问题标题】：Site not loading properly on mobile网站无法在移动设备上正确加载
【发布时间】：2015-09-29 10:38:48
【问题描述】：

我在尝试在任何移动浏览器上加载我的网站 http://www.internhacks.io/ 时遇到问题。该项目可以在 Github 上找到here。

我已经使用 Chrome 开发工具在移动设备上测试了该网站，所有内容都可以正常加载/响应式响应。

但是，在我的实际手机上测试网站时，有时网站根本无法加载，有时只是部分加载。

注意：应用按钮还不能做任何事情

我认为这可能与将大图像作为背景有关。如果检测到的窗口更小，我应该提供更小的版本吗？ img 高度设置为 100vh。

如果有人知道可能导致此问题的原因，或者知道在移动设备上调试网站比在 Chrome 开发工具中更好的方法，请告诉我！

【问题讨论】：

该网站在我的 iPhone 6 上加载，但应用按钮没有任何作用。
我刚在我的iphone 4s上试了一下，它加载了金门大桥的图片，但它被放大了，覆盖了整个页面，可能会覆盖你所有的东西。除了标题信息（标题、日期、应用按钮）之外，它是唯一要加载的内容。

【解决方案1】：

我使用 Opera mini 来测试具有各种屏幕分辨率的移动设备（又名 android）。

“高度设置为 100vh”是吧？以前从未见过那个。为了在可用空间内放置图形，请避免使用固定尺寸（又名 100px），我使用相对宽度：xx%

是的，将大图形发送到移动设备并从服务器发送很浪费，您需要发送一些 xxx-low-res.img 来代替

将 JS 脚本加载到一个部分以允许首先加载所有对象是很有帮助的。

【讨论】：

【解决方案2】：

我认为您的主要问题是大图像应该使用更小、更轻的图片，因为它会在手机上渲染时加快调整大小的过程。除此之外，正如@jobeard 所提到的，您希望避免使用固定尺寸（如 100vh）并使用相对宽度（如 10%）。

【讨论】：