如何讓網站適應不同尺寸的手機屏幕？

Question

我做了一個網站，需要在所有屏幕上以完全相同的方式查看。 我設計了寬度= 320和自動高度。

<meta name="viewport" content="width=320"> 

現在無論屏幕尺寸多大，網站都可以很好地適應屏幕。這對我來說重要的是，網站規模和不能調整大小，所以我不能在這種情況下，使用此代碼：

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

但是，儘管它適用於各種手機仿真器和幾個不同的智能手機罰款它不適合於iPhone 6。它只是顯示整個網站的頂部，左側角落的右側和底部都有黑條。

我該如何強制iPhone 6放大頁面，以便將320px放大以匹配iPhone的屏幕寬度？

Answer 1

使用視口可能不是您的情況的最佳選擇。 我認爲這可能會更好，如果你使用css @media，因爲你需要有寬度= 100％

例如

@media screen and (max-width: 320px) { 
div { 
    width: 100%; 
    padding: 5px 10px; 
}} 

因此，如果用戶使用，無論iPhone 6或iPhone 4，屏幕將是完美的。