如何防止響應/自適應皮膚收縮低於360px寬

我正在製作一個我已構建響應式的Web應用程序。我一直無法獲得一些小於360px寬的屏幕。但許多智能手機都試圖在320像素寬的範圍內顯示它。如何做到這一點，它將響應低至360px，但不低於？如何防止響應/自適應皮膚收縮低於360px寬

UPDATE：此前發佈我已經指定的視口代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

而且，我設定一個最小寬度爲360像素的容器。問題是，在這樣做時，當用戶第一次以IPhones的身份訪問網站時，右側40px被隱藏，而其他許多人默認僅顯示320px，即使他們能夠顯示更多。我知道他們可以縮小，但我希望它在加載時顯示360px寬。

來源

2014-09-03 EfficionDave

您是否考慮更改視口而不是樣式？它基本上爲智能手機提供了「最小頁面寬度」，並且可以執行諸如禁用縮放到縮放（您可能也需要這樣做）。 – cloudfeet 2014-09-03 15:21:20

是的，但我一直無法找到或找出正確的方式來使用它來完成我上面所描述的將實現最大兼容性的內容。 – EfficionDave 2014-09-03 16:37:18

所以肯定添加以下視窗meta標籤到您的html文件的頭部：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

你需要這真正做到手機或平板電腦的任何響應工作。

我不確定您的寬度是否不會超過360像素，或者您被鎖定在360像素並且想要確保它一直減小到320像素。

如果你希望它不超過360像素，小... 你想擁有你的「包裝」元素是流體只下降到360像素，您可以設置您的包裝DIV的屬性（或其他元素被控制您的網站的寬度）在CSS中說min-width: 360px;。這將使得包裝元素的寬度不會小於360px。

如果你不能調整大小小於360px，並希望它...這是與上述相反。也許你的包裝元素有一個min-width: 360px集。在這種情況下，您可以刪除該屬性，使其縮小比360px更窄。

來源

2014-09-03 17:29:54 richfinelli

感謝您的迴應。查看我添加的更新以提供更多細節。 – EfficionDave 2014-09-03 21:00:44

我沒有測試過這個視口的改變，但試試這個。

<meta name="viewport" content="width=device-width, min-width=360, initial-scale=1.0" />

什麼，我希望它會做的是使寬度等於設備的寬度，除非該設備的寬度小於360像素（也就是iPhone），在這種情況下做出的寬度爲360像素。

儘管如此，最好的辦法是真正切換您的思維方式，並使用媒體查詢來調整您的代碼以獲得320px寬的最佳演示。因此，讓您的網站顯示在320px寬，但更改CSS，使網站很好地適合在這個寬度。

例如：

@media screen and (max-width: 360px){ 
    .wrapper { 
    width: auto; 
    } 
    //change some font sizes 
    //put float: none on a few elements that were previously floating 
    //change a few widths of container elements to auto 
    //etc. 
}

媒體查詢中的CSS如果設備是640x360像素或更低纔會得到應用。

來源

2014-09-04 00:59:53 richfinelli

我調整了許多頁面，使得它們在320px下運行良好，但是有一些控件我無法在沒有大量工作的情況下縮小。 – EfficionDave 2014-09-04 04:51:00

如何防止響應/自適應皮膚收縮低於360px寬

回答

相關問題