php - 如果屏幕尺寸小于 Y，则在 php 文件的 body 标签内显示 X-6ren

php - 如果屏幕尺寸小于 Y，则在 php 文件的 body 标签内显示 X

转载作者：行者123 更新时间：2023-11-28 18:52:59

25

4

我需要调整我的模板以适应移动版本，而不是为每个案例或子网站创建不同的页面文件。我认为最简单的方法是更改 css 文件以“重新排列”某些元素。

这就是我到目前为止所做的:

我正在使用 php。
我使用了@media 查询，在 <head> 中添加了这个:<link rel="stylesheet" type="text/css" media="only screen and (max-width: 700px)" href="/css/smartphones.css" /> ，因此每次用户使用小型设备访问网站时，它都会调用 smartphones.css 文件。
直到现在，当我决定调整下拉菜单时，一切都还算顺利。我有一个纯 css 的下拉菜单，在鼠标悬停时激活。我使用 :hover 让菜单真正下拉。

我想将包含许多元素(水平和垂直)的大下拉菜单替换为单个按钮，onclick 将下拉，并仅显示一些内容。

为了做到这一点，我需要调整我的 php 页面文件以隐藏整个下拉菜单并显示“mini-onclick”下拉菜单。这是我不知道该怎么做的。

我想我需要一些 -javascript- 在我的 body 标签内(因为菜单出现在 body 内)来表达类似这样的话:

如果屏幕小于 700 像素，则显示此 XXXX 代码。 ELSE 继续浏览页面的其余部分。

我打算在 smartphones.css 文件中使用 css 隐藏普通的下拉菜单，但不知道如何显示特殊的下拉菜单。

任何帮助将不胜感激!谢谢!

罗莎蒙达

最佳答案

您可以在 PHP 中使用 User-Agent HTTP header 来确定是否应生成与智能手机相关的代码而不是普通代码。

您还可以通过 screen 对象获取屏幕属性，如果是智能手机，则将下拉状态附加到 onclick 事件，如果不是，则附加到 onmouseover 事件。

这很简单。您只需将 CSS 从 someclass:hover 更改为 someclass.hoverstate，当需要触发下拉列表时，将 hoverstate 类添加到目标元素。

关于php - 如果屏幕尺寸小于 Y，则在 php 文件的 body 标签内显示 X，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8791008/

25

4