我需要调整我的模板到移动版本，而不为每个案例或子网站创建不同的页面文件。我认为最简单的方法是将css文件更改为“重新排列”某些元素。
所以这就是我到目前为止所做的：
我正在使用php。
我使用了@media查询，在<head>这个<link rel="stylesheet" type="text/css" media="only screen and (max-width: 700px)" href="/css/smartphones.css" />内添加，所以每次用户访问网站时都会调用smartphones.css文件小装置。
到目前为止，当我决定调整下拉菜单时，一切都很顺利。 我有一个纯css的下拉菜单，它会在鼠标悬停时激活。我使用：悬停以使菜单实际下拉。
我想将包含许多项目（水平和垂直）的大下拉菜单替换为单个按钮， onclick 将下拉，并显示一些内容。
为了做到这一点，我需要调整我的php页面文件以隐藏整个下拉菜单，并显示“mini-onclick”下拉菜单。这就是我不知道如何做到的。
我需要一些-javascript我猜 - 在我的身体标签内（当菜单出现在身体内部时）说出如下内容：
如果屏幕小于700像素，请显示此XXXX代码。 ELSE继续使用页面的其余部分。
我打算在smartphones.css文件中使用css隐藏正常的下拉菜单，但不知道如何显示特殊的下拉菜单。
任何帮助将不胜感激！谢谢！
Rosamunda
答案 0 :(得分：1)
您可以使用PHP中的User-Agent HTTP标头来确定是否应该生成与智能手机相关的代码而不是普通代码。
您还可以通过screen对象获取屏幕属性，如果是智能手机，请将下拉状态附加到onclick事件，如果不是onmouseover事件。
这很简单。您只需将CSS从someclass:hover更改为someclass.hoverstate，当需要触发下拉列表时，将hoverstate类添加到目标元素。