2

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

布局必须根据浏览器宽度在不同位置包含相同的 php 文件。

显示：无；仍然加载内容并可能破坏所述文件中的代码。

<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

4

3 回答 3

4

您不应该在服务器端进行响应，而应该在客户端使用@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';
}
于 2012-12-11T12:13:38.610 回答
3

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

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

于 2012-12-11T12:10:36.270 回答
0

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

于 2012-12-11T12:11:24.600 回答