我对这个网站相当陌生,但发现它很棒,很棒的专业知识。我有一个小问题,网站在手机上没有 100% 显示。它是构建响应式的,我的印象是它最初工作正常,但沿线发生了一些变化。该网站会根据移动屏幕自行调整,但它无法正确缩放,您必须手动缩小它才能在屏幕中看到所有内容。 我不是一个真正的开发人员,但我认为这应该很容易解决。希望有人能帮忙。
在我的代码下面:
仅@media屏幕和(最大宽度: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;}
}
/***** 平板电脑纵向和横向 *****/
@media全部 和(最小宽度:768px) 和 (最大宽度 : 1024px) {
Mesh-left{ left: -280px !important; }
mesh-right{ right: -360px !important; }
}
/***** 肖像平板电脑 *****/
仅@media屏幕 和(最小设备宽度:768px) 和(最大设备宽度:1024px) 和(方向:纵向){
}
在<head> </head>
标记中添加以下内容,以使 css 能够正确检测屏幕宽度:
<meta name="viewport" content="width=device-width">
您应该使用 Bootstrap 开发响应式移动 Web 应用程序