JS中的window.innerWidth不等於css中的'width：100％`

-1

我正在手機上創建一個網頁，該網頁將適合屏幕的100％寬度。JS中的window.innerWidth不等於css中的'width：100％`

但是，當我使用JavaScript創建了一些元素並將寬度設置爲window.innerWidth時，它們將比在CSS中設置width: 100%的靜態元素寬得多。（在iPhone 6（S））

的width: 100%將這些元素375px，我認爲這是對的，因爲屏幕分辨率爲1334 X 750。然而，window.innerWidth爲488px，無論出於何種原因，我真的不明白。

這是我正在測試的瀏覽器的錯誤，還是我錯過了視網膜屏幕的東西？我使用width:480px;max-width:100%來設置靜態元素。查看端口meta就像<meta name="viewport" content="width=device-width, initial-scale=1.0">

來源

2015-11-20 leetom

375是正確的，我不知道在那裏的488是從哪裏來的？您是否將任何元素設置爲寬度的硬編碼像素值？您是否使用了正確的視口元標記？ –

我使用'width：480px; max-width：100％'設置寬度，所以我認爲它應該沒問題 – leetom

像素比率和側邊欄可能導致窗口的內部寬度根據設備而不同。如果你需要檢查JavaScript中的窗口寬度，以便你的媒體查詢匹配。使用window.matchmedia函數。

if (window.matchMedia('max-width:800').matches){ 
     console.log('tablet mode'); 
    }

來源

2015-11-20 03:08:32 magreenberg

JS中的window.innerWidth不等於css中的'width：100％`

回答

相關問題