Question

我在响应式网站上有一个菜单按钮，但我注意到它在我的三星手机上从纵向定向到横向时消失，无法看到导航链接。这是我正在使用的移动css代码。是否有任何弹出可能导致问题的东西。谢谢你的帮助。

/* RESPONSIVE GRID SYSTEM MOBILE   =====================================================================  */

/*  MAKE LAYOUT RESPONSIVE at 1024px FOR SMALLER    SCREENS ================================================================ */

@media screen and (max-width: 1024px) {

body {
background-color: #f6f6f6;
}

header {
width: 93.75%; /* 960px / 1024px */
}
#maincontent{
width: 93.75%; /* 960px / 1024px */
}       
.maincontent{
width: 93.75%; /* 960px / 1024px */
}
footer {
width: 93.75%; /* 960px / 1024px */
}
img.image-3-2.features-home-image  {
margin: 1% auto 1% auto;
width: 100%;
max-width: 250px;       
}
img.logo-14, img.JVW-Logo, img.JVW-text-line {
display: block;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-right: 1px;
padding-left: 1px;
max-width: 250px;
}

.list-holder  {
display: block;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
width: 60%;
}

ul.unorder-list.unordered-list-1  {
width: 100%;
list-style-position: inside;
list-style-type: disc;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size: 1.2em; /* 19 / 14 = 1 */
text-indent: -1em;
}   
}

/*  MAKE LAYOUT RESPONSIVE at 768px FOR IPAD       PORTRAIT ================================================================ */

@media screen and (max-width: 768px) {

body {
background-color: #f6f6f6;
}

header {
width: 93.75%; /* 720px / 768px */
}
#maincontent{
width: 93.75%; /* 720px / 768px */
}       
.maincontent{
width: 93.75%; /* 720px / 768px */
}       
footer {
width: 93.75%; /* 720px / 768px */
}
img.image-3-2.features-home-image  {
margin: 1% auto 1% auto;
width: 100%;
max-width:200px;        
}

img.logo-14, img.JVW-Logo, img.JVW-text-line {
display: block;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-right: 1px;
padding-left: 1px;
max-width: 220px;
}   

.list-holder  {
display: block;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
width: 70%;
}

ul.unorder-list.unordered-list-1 {
width: 100%;
list-style-position: inside;
list-style-type: disc;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size: 1.2em; /* 19 / 14 = 1 */
text-indent: -1em;
}
nav { 
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}   
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {

body {
background-color: #f6f6f6;
}
h3 { 
color: #623512;
margin-bottom: 0.3em;
font-size: 1.8em; /* 22 / 29 */
line-height: 1.6em; 
text-align: center; 
}
img.image-3-2.features-home-image  {
margin: 1% auto 1% auto;
width: 100%;
max-width: 220px;       
}

img.logo-14, img.JVW-Logo, img.JVW-text-line {
display: block;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-right: 1px;
padding-left: 1px;
width: 100%;
max-width: 220px;
}   

.list-holder  {
display: block;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
width: 60%;
}

ul.unorder-list.unordered-list-1 {
width: 90%;
list-style-position: inside;
list-style-type: disc;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size: 1.2em; /* 19 / 14 = 1 */
text-indent: -1em;
}
nav { 
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media screen and (max-width: 480px) {

body {
background-color: #f6f6f6;
}
h3 { 
color: #623512;
margin-bottom: 0.3em;
font-size: 1.8em; /* 22 / 29 */
line-height: 1.6em; 
text-align: center; 
}
img.image-3-2.features-home-image  {
margin: 1% auto 1% auto;
width: 100%;
max-width: 240px;
border: 1px solid green;        
}

img.logo-14, img.JVW-Logo, img.JVW-text-line {
display: block;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-right: 1px;
padding-left: 1px;
width: 100%;
max-width: 340px;
}

.list-holder  {
display: block;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
width: 65%;
}

ul.unorder-list.unordered-list-1 {
width: 90%;
list-style-position: inside;
list-style-type: disc;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
font-size: 1.2em; /* 24 / 18 = 1 */
text-indent: -1em;
}
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #889097;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url(img/nav-icon.png) no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}

Answer 1

在媒体查询中，您还可以添加orientation: landscape或orientation: portrait作为条件，这样您就可以为横向与纵向模式设置不同的规则，例如

@media only screen and (width:320px) and (height:480px) and (orientation: landscape) {
  [... your rules for landscape mode only ... ]
}

......和肖像模式类似

Answer 2

如果不知道菜单中的哪个元素，很难调试。但是这个bug很简单，当你把三星放在一边时，屏幕的宽度现在大于768px并且没有代码似乎改变了菜单风格。

确认您可以在PC上的三星上remotely debug Chrome

无论如何，这段代码有两件事我认为你做错了：

在屏幕上以1024px

您的设计必须始终具有响应性，与屏幕尺寸无关，否则您会遇到此类问题，并且可能会破坏您未测试屏幕尺寸的用户的风格。

假设屏幕尺寸

此评论/* MAKE LAYOUT RESPONSIVE at 768px FOR IPAD表明您正在根据屏幕尺寸更改内容，这是一个坏主意。

为什么呢？因为没有什么可以阻止制造商创建一个能够用784px或800px的屏幕打开页面的设备。你测试过那些会发生什么吗？可能没有。

真实的响应式设计会在不再适合时改变元素样式。如果水平菜单的最小宽度为（或开始与其他元素碰撞）945px，则将其更改为此宽度的按钮，而不是768px，因为这是iPad屏幕。

响应式设计的想法不是将菜单按钮放在移动设备上，因为这是趋势，但因为它不合适。请遵循以下两条建议，您的网站将始终适用于所有人。

在orientation @media中使用res.set('x-auth', token);时要小心，Mozilla notes：

注意：此功能与设备方向不对应。在纵向打开许多设备上打开软键盘将导致视口变得比它高，从而导致浏览器使用横向样式而不是纵向。

当手机更改为横向时，响应式网站菜单按钮会消失

2 个答案: