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

Question

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

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

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

注意：应用按钮不打算做任何事情

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

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

Answer 1

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

“身高设定为100vh”吧？从来没有见过那个。要在可用空间内拟合图形，请避免使用固定大小（也称为100px）并使用相对宽度：xx％

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

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

Answer 2

我认为您的主要问题是大图像应使用较小，重量较轻的图片代替，因为这样可以加快在手机上渲染时的尺寸调整过程。除此之外，如@jobeard所述，您要避免使用固定大小（如100vh），而使用相对宽度（如10％）。