pc端網頁自適應顯示在移動端

2021-09-11 06:29:38 字數 329 閱讀 5543

當我們將乙個pc端的網頁放到移動端的時候,移動端瀏覽器會將pc端的網頁按照一定的比例完整的顯示出來,這是因為移動端的瀏覽器預設的會將網頁渲染在乙個比例比較大的viewport中排版(ios預設的是980px,android4.0以上為980px),然後通過比例縮放看到整個頁面的全貌。 

但是,使用預設的viewport布局會有以下缺點:

所以,我們可以通過meta標籤改變viewport得到移動端網頁定製化自適應的乙個效果。

通過以上meta標籤的設定,就可以將乙個pc端的網頁自適應的顯示在移動端了,而以上的引數設定也是我們移動端開發的最常用設定。

網頁自適應pc端和移動端

手機的螢幕比較小,寬度通常在600畫素以下 pc的螢幕寬度,一般都在1000畫素以上 目前主流寬度是1366 768 有的還達到了2000畫素。同樣的內容,要在大小迥異的螢幕上,都呈現出滿意的效果,並不是一件容易的事。很多 的解決方法,是為不同的裝置提供不同的網頁,比如專門提供乙個mobile版本,...

移動端PC端自適應

查詢 這段 的幾個引數解釋 width device width 寬度等於當前裝置的寬度 initial scale 初始的縮放比例 預設設定為1.0 minimum scale 允許使用者縮放到的最小比例 預設設定為1.0 maximum scale 允許使用者縮放到的最大比例 預設設定為1.0 ...

pc端網頁自適應各版本移動端螢幕大小

在網上廣泛搜尋後終於找到了解決辦法 meta標籤起決定性作用 meta name viewport content width device width,initial scale 1,minimum scale 1,maximum scale 1,user scalable no 在網頁的中增加這...