手机切换到横向时响应式网站菜单按钮消失

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

如果不知道您的菜单是什么元素，就很难进行调试。但是错误很简单，当您将三星侧放时，屏幕宽度现在大于 768 像素，并且似乎没有更改菜单样式的代码。

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

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

1. 响应式“开始”在 1024 像素的屏幕上

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

1. 根据屏幕尺寸更改样式

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

为什么？因为没有什么可以阻止制造商创建能够以 784 像素或 800 像素的屏幕打开您的页面的设备。你有没有测试过这些会发生什么？可能没有。

真正的响应式设计会在 它们 不再适合时改变元素样式。如果您的水平菜单的最小宽度为 945 像素（或开始与其他元素发生碰撞），您可以将其更改为此宽度的按钮，而不是 768 像素，因为那是 iPad 屏幕。

响应式设计的理念不是将菜单按钮放在手机上，因为这是趋势，而是因为它不适合。遵循这两个建议，您的网站将始终适用于所有人。

在你的@media 中使用orientation 时要小心，如Mozilla notes：

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