mesh-left {left：-280px！important; }

Question

我对这个网站很新，但发现它很棒，很棒的专业知识。我有一个小问题，一个网站没有100％正确显示在手机上。这是建立响应和我最初工作得很好的印象，但有些事情发生了变化。该网站将自身调整为移动屏幕，但它无法正确缩放，您必须手动减少它以在屏幕上查看所有内容。我不是一个真正的开发人员，但我认为应该很容易修复。希望有人可以提供帮助。

在我的代码下面：

@media only screen and（max-width：767px）{

.hide-for-small{ display: none; }
#mesh-left{ display: none; }
#mesh-right{ display: none; }

.push-half{ left: 0; }
.pull-half{ right: 0; }

.square-box{ min-width: 100%; padding: 33px 11px 22px 11px; }
.box-title{ background: none !important; margin-bottom: 0px; width: 100% !important; }
.box-title h4{ color: #222 !important; }

.form-title{ width: 100%; top: 0px; text-align: center; }
#form-holder select{ width: 100%; }
.form-input input{ width: 100%; }
.form-input textarea{ width: 100%; text-align: center; height: 100px;  }


.show-for-small{ display: block; }

#contact{ padding: 44px 15px 44px 15px; text-align: center !important; }

#logo{ margin-top: 55px; }
.social-header{ top:2%; left: 35%;}
#main-menu{ margin-left:0;}

} @media屏幕和（最大宽度：370px）{

.hide-for-small{ display: none; }
#mesh-left{ display: none; }
#mesh-right{ display: none; }

.push-half{ left: 0; }
.pull-half{ right: 0; }

.square-box{ min-width: 100%; padding: 33px 11px 22px 11px; }
.box-title{ background: none !important; margin-bottom: 0px; width: 100% !important; }
.box-title h4{ color: #222 !important; }

.form-title{ width: 100%; top: 0px; text-align: center; }
#form-holder select{ width: 100%; }
.form-input input{ width: 100%; }
.form-input textarea{ width: 100%; text-align: center; height: 100px;  }


.show-for-small{ display: block; }

#contact{ padding: 44px 15px 44px 15px; text-align: center !important; }

#logo{ margin-top: 55px; }
.social-header{ top: 150px; left: 35%; }
#main-menu{ margin-left:0;}

}

/ ***** TABLETS PORTRAIT＆amp;风景***** /

@media all 和（最小宽度：768px）和（最大宽度：1024px）{

mesh-left {left：-280px！important; }

mesh-right {right：-360px！important; }

}

/ ***** PORTRAIT TABLETS ***** /

@media only screen 和（min-device-width：768px）和（max-device-width：1024px）和（方向：肖像）{

}

Answer 1

您应该使用Bootstrap来开发响应式移动Web应用程序

Answer 2

将此添加到您的 <head> </head> 标记中以使 css 能够正确检测屏幕宽度：

<meta name="viewport" content="width=device-width">

响应式网站无法正确显示

mesh-left {left：-280px！important; }

mesh-right {right：-360px！important; }

2 个答案: