• 歡迎訪問奇跡の海網站,本站不上傳任何資源,所有資源均來自于網絡,歡迎加入奇跡の海~!奇跡の海-WordPress QQ群
  • 本站下載資源為網絡上收集整理而來,并且以計算機技術研究交流為目的,版權歸原作者所有,僅供大家參考,學習,不存在任何商業目的與商業用途.
  • 本站系統鏡像均來自于官方原版,ed2k可視為P2P下載鏈接。所有操作系統默認均為試用版,如有正版密鑰可以有效激活,本站不提供任何激活和相關服務。

100% width CSS 在縮小/放大窗口時候內容被截斷或顯示不全

WP主題 奇跡の海 2年前 (2017-07-08) 2135次瀏覽 已收錄 0個評論 掃描二維碼

100% width CSS 在縮小/放大窗口時候內容被截斷或顯示不全
故障現象:

當我們在寫代碼的時候如果,頁面頭部(#header )樣式定義使用了100%寬度,那么當我們把瀏覽器窗口縮小的時候就會發現有部分內容被截斷或顯示不全;

原因分析:

當窗口縮小時,瀏覽器默認100%寬度為瀏覽器窗口的寬度。而忽略了下部內容層固定寬度(比如你設置的網頁整體寬度為960px)。從而出現了固定寬度大于100%寬度的現象。瀏覽以此理解來解析頁面,就出現了容器寬度理解上的差異,出現了一個非常奇特的BUG;

解決辦法:

只需要使用css的min-width:980px對width:100%的對象加以限制即可以解決;
如果在做自適應網頁或測試網頁在不同設備下的兼容性測試時候,比如 iPad 的 Safari 瀏覽器中背景顯示不全,等問題,都可以嘗試定位到該 div 后,即很有可能發現是指定 css 的寬度為 100%導致問題;safari 中 viewport 默認寬度為 980px,若事先未指定其初始 viewport 寬度,則會默認按照 980px 處理。可以默認初始化viewport寬度或在 css 中設定 min-width即可解決;

在做一個wap網站時發現在 IPONE4頁面顯示寬高為320*480頁不是640*960了,這樣顯示就不全屏了,下面我來告訴你具體的解決辦法。

如果你也遇到了同樣的問題,想要快速的解決掉它。你可以試著將viewport設置或添加成如下CODE:

<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5" />

如果恰巧解決了這個問題,那么恭喜你!

兩種:

縮放自適應
響應式布局
第一種,縮放自適應的頁面, 可以使用

<!--最普通最常見的用法-->
<meta name="viewport" content="width=device-width" />
<!-- 如果有足夠的高清圖資源,主要支持retina設備(ip4/4s),那么推薦下面這種-->
<meta name="viewport" content="width=640" />
<!-- 如果針對new iPad,甚至可以試試這個-->
<meta name="viewport" content="width=1536" />

第二種,復雜的響應式布局,實際就是要求頁面在切換橫屏時不放大,從而留出空白用以填充或調整列布局。
此時可以看到無論width還是initial-scale都無法限制橫屏時的放大,因而必須用上minimum/maximum-scale,而width和initial-scale則推薦使用initial-scale,使三個scale參數統一。

<!--最普通最常見的用法-->
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1" />
<!--for retina screen-->
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5" />

如果你在Android,或其它移動設備上也遇到了分辨率與頁面尺寸不符的情況,你也可以試著懷疑一下viewport。


版權聲明:本站所有文章和資源使用CC BY-NC-SA 4.0協議授權發布 , 轉載應當以相同方式注明文章來自“SeaOMC.COM->100% width CSS 在縮小/放大窗口時候內容被截斷或顯示不全!在下邊可以分享本文哦!
喜歡 (2)
[]
分享 (0)
奇跡の海
關于作者:
一個WordPress菜鳥!
發表我的評論
取消評論

表情 貼圖 加粗 刪除線 居中 斜體 簽到

Hi,您需要填寫昵稱和郵箱!

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址
中国福利彩票36选7开奖结果