我需要调整我的模板以适应移动版本，而不是为每个案例或子网站创建不同的页面文件。我认为最简单的方法是更改 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/