safari手機瀏覽器的width:100%的自適應問題

時間 2019-11-20

標籤 safari 手機瀏覽器 width 100% 自適應問題欄目瀏覽器简体版

原文原文鏈接

Tips: 調試 iPad 或 iPhone 可在設置中啓動調試模式，在 Mac 中的 Safari 瀏覽器一樣開啓開發者模式後，進行聯機調試。功能彪悍。css

最近在作一個頁面時，發如今 iPad 的 Safari 瀏覽器中背景顯示不全，定位到該 div 後發現所指定 css 的寬度爲 100% ；web

到百度搜索後發現，safari 中 viewport 默認寬度爲 980px，若事先未指定其初始 viewport 寬度，則會默認按照 980px 處理。瀏覽器

能夠默認初始化 viewport 寬度或在 css 中設定 min-width，但最簡單的方法能夠在 head 標籤中初始化好 viewport。app

詳見下方代碼：iphone

<metaname="viewport"content="width=網頁真實寬度, initial-scale=倍數值"/>
假設網頁寬度爲 960px 或 1080px，可在width中加入該值，並將 initial-scale 設置一個適合的倍數值。spa

例如一個頁面的寬度爲 1080px，則設定爲：.net

<metaname="viewport"content="width=1080, initial-scale=0.9"/>
這樣無論加載先後切換橫屏仍是豎屏，均可以友好顯示。【可參考：股票配資手機端與pc端的瀏覽對比】
但是好比頭部部分設置爲width：100%，而網頁中部最大寬度爲默認：1200px，頭部和中部長度不一致。這個問題在pc端和手機的默認像素不一致形成。該如和解決？
找了不少資料，終於找出來了：
在網頁的<head>中增長以上這句話，可讓網頁的寬度自動適應手機屏幕的寬度:

scala

1 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />     
2 <meta name="apple-mobile-web-app-capable" content="yes" />    
3 <meta name="format-detection" content="telephone=no" />

第一行：
width=device-width ：表示寬度是設備屏幕的寬度
initial-scale=1.0：表示初始的縮放比例
minimum-scale=0.5：表示最小的縮放比例
maximum-scale=2.0：表示最大的縮放比例
user-scalable=yes：表示用戶是否能夠調整縮放比例
第二行：
設定iphone端頁面全屏。
第三行：
取消數字被識別爲電話號碼。調試

若是是想要一打開網頁，則自動以原始比例顯示，而且不容許用戶修改的話，則是：

code

1 <meta name="viewport" content="width=device-width（這裏是能夠變化的，根據你的其餘div的寬度來設置）, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

這樣子寫後，就能夠把一些頁頭橫幅等的圖片的寬度都設置成style="width:100%"，整個頁面在設備上看起來就是全屏的了。【要把width=device-width 中的device-width換成你中部設置的像素值，好比個人設置爲1200px】這樣問題就解決了。

親測有用！解決了一個難題！！！

原文連接：https://blog.csdn.net/houerfei/article/details/42995901