響應網站顯示不正確

Question

我是相當新的網站，但發現它真棒，豐富的專業知識繞來繞去。我有一個網站沒有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） 和（最大寬度：1,024）{

網狀左{左：-280px重要; }

網格權{右：-360px重要;！ }

}

/*****肖像片劑*****/

@media只有屏幕 和（最小 - 設備寬度：768px） 和（最大值 - 裝置 - 寬度：1,024） 和（方向：縱向）{

}

Answer 1

您應該使用Bootstrap爲響應下發展，移動Web應用程序