响应式设计+ RESS技术

Question

我想知道在if / else PHP或Javascript中是否可以轻松完成类似的事情。我已经阅读了通常的ress技术，我正在尝试找到一种不依赖于像WURFL这样的设备检测的解决方案。 也许我想要的是“条件加载”？

我的目标是仅根据屏幕宽度加载适当的标记，就像媒体查询一样。例如，我可以为更大的屏幕创建一个完整的导航，为更小的设备/屏幕创建一个更简单的移动友好的导航。这将节省大量带宽并使网站真正灵活。感谢您的投入！

{ if < 768 }
some code here {html, php, etc}
{ / if}
{ if > 768 }
some code here {html, php, etc}
{ / if}

Answer 1

您可以将element.clientWidth用于设备宽度和window.screen.width。另一种方法是window.matchMedia，它可以在每个浏览器中使用。

Answer 2

有几种方法可以制作这些设计。 Javascript和php都可以使用，但会有它们的查询。

你说你不想做用户代理测试，所以排除了PHP。您可以使用php通过执行$_SERVER['HTTP_USER_AGENT']检查用户代理并测试IPhone等，如果您愿意，然后在条件语句中显示您想要的内容。

Javascript可用于使用

测试屏幕尺寸

window.screen.availWidth AND window.availHeight

这将返回Web浏览器可以占用的浏览器的可用高度。要获得完整分辨率，请使用window.screen.width AND window.screen.height

这适用于大多数浏览器，但有一个问题。根据像素深度比，您可能无法返回ACTUAL屏幕分辨率。例如，我使用具有视网膜屏幕的mac。上面列出的javascript显示我的屏幕宽度和高度是1280x800，实际上是2560x1600或2x的返回值。你可以通过用视网膜屏幕测试苹果产品并乘以2来解决这个问题。尽管如此，他的像素深度不会影响网站上物体的比例，只会使图像和视频看起来不模糊或像素化。

希望这有帮助。