如何使頁面適合移動設備上的屏幕寬度？

我有一個表單頁面。我需要這個縮放的窗體，適合任何設備（Android，iOS，...）的屏幕寬度。我如何使用HTML或CSS做到這一點？ style="width:100%"對我來說不是一個解決方案。如何使頁面適合移動設備上的屏幕寬度？

謝謝！

使用媒體查詢。查找響應式設計。 –

爲什麼width:100%不是一個選項？

您可以使用媒體查詢針對不同的屏幕尺寸，像這樣：

form { 
    width: 800px; 
} 

@media only screen and (max-width: 800px) { 
    form { 
     width: 100%; 
    } 
}

上面的代碼將使form 800像素寬比800像素寬在任何屏幕上，如果顯示在屏幕尺寸等於或者低於800像素寬度，則會變爲100％。您可以根據需要使用其中的任意數量，例如，您可以在此之後爲其他媒體查詢max-width: 500px並相應地更改500px及以下屏幕尺寸的表單樣式。

2013-09-30 17:23:42 Ennui

我想縮放所有內容，不僅僅是自己的形式。我想要擴展它的所有元素。就像在觸摸屏上使用兩個手指縮放手勢一樣。但在頁面加載自動。嘗試在移動設備上加載一些頁面，然後用兩個手指手勢將其縮小。我想在頁面加載上也是這樣。 –

即使對於無響應的網站，大多數移動瀏覽器（即Safari）也會自動縮放以適應包裝寬度（因此您會看到網站縮小的「桌面」佈局）。如果它沒有這樣做，那麼你的'head'中可能有'meta'標籤，這些標籤指定了其他一些行爲。你能發佈表單所在頁面的整個HTML輸出嗎？ – Ennui

我可以提供這種形式的URL：http://95.57.120.158:7300/api.php?action=poll&location_id=70 –

回答