Question

我遇到了响应式布局的问题。

布局必须在不同的地方包含相同的php文件，具体取决于浏览器的宽度。

display：none; 仍会加载内容并可能会破坏所述文件中的代码。

<div id="more_than_960">
    <?php require "content.php";?>
</div>

<div id="less_than_960">
    <?php require "content.php";?>
</div>

有没有更好的方法来实现目标？

问题不是隐藏内容，而是将其从加载过程中排除。

对于遇到此问题的其他人。这是我的Markus提供的一个很好的解决方案：

https://github.com/serbanghita/Mobile-Detect

Answer 1

您不应该在服务器端做响应，您应该在客户端进行响应，使用@media查询和必要的javascript。所以你会有类似的东西：

@media (min-width:960px) {
    .somestuff {
        display: none;
}

等

所以你需要改变一下你的方法。使内容降级良好，而不是插入重复的内容。

如果您确实需要在服务器端执行此操作，则可能不想要求宽度，而是直接检测具有此类https://github.com/serbanghita/Mobile-Detect的库的特定设备组。

此外，您可能希望将标记与内容分开。

include 'Mobile_Detect.php';
$detect = new Mobile_Detect();

if ($detect->isMobile()) {
    $markup = 'your markup';
}
else if ($detect->isTablet()) {
    $markup = 'your alternative markup';
}

Answer 2

使用媒体查询显示内容。无需显示/隐藏div

请参阅此链接以获取帮助http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries

Answer 3

您可以制作If-Else function并使用$_SERVER['HTTP_USER_AGENT']来检查正在使用的设备。并使一个div加载。

PHP响应条件包含

3 个答案: