我使用的基本方法是使用不同的样式表“动员”我的桌面网站。在我网站的每个页面的顶部，都有：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://scoresquare.net/css/screen.css" type="text/css" media="Screen" />
<link rel="stylesheet" href="http://scoresquare.net/css/mobile.css" type="text/css" media="handheld" />
每当用户从智能手机登录我的网站时，都会转到主页[index.php]，该页面的顶部也有上述代码。主页上有八个按钮，无论用户做出哪种选择，网站都会在其智能手机上正确显示移动版本。
但是，只要用户决定通过任何其他页面上的按钮返回首页，index.php就会在其智能手机的DESKTOP版本中显示。换句话说，index.php第一次在智能手机上正确显示，但第二次（以及以后的所有）都不能正确显示。
如果用户只是单击智能手机浏览器上的“返回”按钮返回首页，则index.php将显示正确的移动格式。
FWIW，每个主页按钮都涉及到我的程序查询SQL数据库并返回数据（效果很好）。这会以某种方式重置样式表功能吗？
如果很重要，mymobile.css如下所示：
/* mobile styles */
@media handheld {
html, body {
font: 12px/15px sans-serif;
background: #fff;
padding: 3px;
color: #000;
margin: 0;
}
#sidebar, #footer {
display: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
#content img {
max-width: 250px;
}
.center {
width: 100% !important;
text-align: center;
}
a:link, a:visited {
text-decoration: underline;
color: #0000CC;
}
a:hover, a:active {
text-decoration: underline;
color: #660066;
}
}
/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.selector-01 { margin: 10px; }
.selector-02 { margin: 10px; }
.selector-03 { margin: 10px; }
}
/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
.selector-01 { margin: 10px; }
.selector-02 { margin: 10px; }
.selector-03 { margin: 10px; }
}
知道是什么原因造成的吗？
最佳答案
奇怪的是，它在第一次加载时就起作用了！
valid media types是“全部”，“打印”，“屏幕”和“语音”。在当前的实践中，“屏幕”通常被认为等同于“全部”，并且类型被简单地忽略了（对于仅打印和仅用于屏幕阅读器的样式，保留了介质类型规范）。
链接的样式表中的媒体查询看起来像
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
（是从此write-up of how to use media queries复制的）
在您的情况下，最终标记将类似于
<link rel="stylesheet" href="http://scoresquare.net/css/screen.css" type="text/css" />
<link rel="stylesheet" href="http://scoresquare.net/css/mobile.css" type="text/css" media="(max-width: 400px)" />
（我不知道您用作“手持式”断点的宽度是多少，所以我只使用了400px。CSS-Tricks的Media Queries for Standard Devices是
max-width移动断点的一个很好的参考。。。麻烦针对特定设备，但是例如，这表明您在800px处的断点将捕获最受欢迎的平板电脑）关于html - 移动CSS恢复到智能手机上网站的桌面版本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39280661/