Mobile/Desktop 媒体查询不适用于单元格 phone
Mobile/Desktop media query not working on cell phone
昨晚我致力于使我的网站移动优化。当用户使用小于 684px 的设备时,它应该显示移动导航 div 并隐藏侧边栏 div。我已经在我的计算机上测试了它(通过像手风琴一样缩小 chrome)。我还检查了 https://www.google.com/webmasters/tools/mobile-friendly/?url=www.kisnardonline.com 以查看我的状态,但它说我的网站不适合移动设备(我意识到我的链接也可能 valid/viewport)。一旦我让它整体运作起来,我会让链接更广泛地传播。感谢您的帮助!
这是我的代码(http://www.kisnardonline.com/wp-content/themes/mytheme/style.css):
#wrapper {
display: block;
min-width: 684px;
max-width: 1200px;
width: 98%;
margin: 0px auto; }
@media screen and (max-width: 684px) {
#wrapper {
min-width: 0px; /* show under 684px - mobile */
}
}
#content {
width: 74%;
float: right; }
@media screen and (max-width: 684px) {
#content {
width: 100%; /* show under 684px - mobile */
}
}
#mobilenav {
display: none;
margin: 15px auto;
padding: 10px 10px 10px 10px;
border-radius:20px;
border:3px solid #a1a1a1;
background:#1C2939; }
@media screen and (max-width: 684px) {
#mobilenav {
display: block; /* show under 684px - mobile */
}
}
#sidebar {
display: block;
width: 23%;
min-width: 170px;
max-width: 210px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: left; }
@media screen and (max-width: 684px) {
#sidebar {
display: none; } /* hide under 684px - mobile */
}
这是我的桌面(大于 684px 视图):
这是我的桌面(小于 684px 视图):
这是我的手机视图(Samsung Galaxy S6):
对于响应式页面,您需要添加一个视口标签,告诉设备如何显示内容:
<meta name="viewport" content="width=device-width, initial-scale=1">
对于您的其他问题,"request desktop site" 不会按照您设置的方式工作。该功能适用于您有 2 个独立站点(一个用于移动设备,一个用于桌面设备)的情况。例如,移动站点将是 m.kisnardonline.com
,并且与桌面站点具有不同的文件。
昨晚我致力于使我的网站移动优化。当用户使用小于 684px 的设备时,它应该显示移动导航 div 并隐藏侧边栏 div。我已经在我的计算机上测试了它(通过像手风琴一样缩小 chrome)。我还检查了 https://www.google.com/webmasters/tools/mobile-friendly/?url=www.kisnardonline.com 以查看我的状态,但它说我的网站不适合移动设备(我意识到我的链接也可能 valid/viewport)。一旦我让它整体运作起来,我会让链接更广泛地传播。感谢您的帮助!
这是我的代码(http://www.kisnardonline.com/wp-content/themes/mytheme/style.css):
#wrapper {
display: block;
min-width: 684px;
max-width: 1200px;
width: 98%;
margin: 0px auto; }
@media screen and (max-width: 684px) {
#wrapper {
min-width: 0px; /* show under 684px - mobile */
}
}
#content {
width: 74%;
float: right; }
@media screen and (max-width: 684px) {
#content {
width: 100%; /* show under 684px - mobile */
}
}
#mobilenav {
display: none;
margin: 15px auto;
padding: 10px 10px 10px 10px;
border-radius:20px;
border:3px solid #a1a1a1;
background:#1C2939; }
@media screen and (max-width: 684px) {
#mobilenav {
display: block; /* show under 684px - mobile */
}
}
#sidebar {
display: block;
width: 23%;
min-width: 170px;
max-width: 210px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: left; }
@media screen and (max-width: 684px) {
#sidebar {
display: none; } /* hide under 684px - mobile */
}
这是我的桌面(大于 684px 视图):
这是我的桌面(小于 684px 视图):
这是我的手机视图(Samsung Galaxy S6):
对于响应式页面,您需要添加一个视口标签,告诉设备如何显示内容:
<meta name="viewport" content="width=device-width, initial-scale=1">
对于您的其他问题,"request desktop site" 不会按照您设置的方式工作。该功能适用于您有 2 个独立站点(一个用于移动设备,一个用于桌面设备)的情况。例如,移动站点将是 m.kisnardonline.com
,并且与桌面站点具有不同的文件。