IOS機型margin屬性無效問題

2022-06-27 17:09:14 字數 1361 閱讀 5654

這個問題很多小夥伴都有遇到,這次本猿也遇到了,記錄一筆。

結論:簡單的解決辦法margin換padding!如有誤,請大神不吝賜教。在chrome瀏覽器移動端測試iphone5,開啟的也是沒問題的(這感覺有坑還是要在真機才能發現)。

以下跟本人問題一樣,借用配圖及說明。

****底部footer設定margin屬性的時候發現真機ios上無效,在iphone6p上發現問題,螢幕較小,先把出現問題的截圖發出來看一下

​安卓手機,開啟正常

​iphone6 p 開啟出現的問題(無視margin-bottom:60px)​

​當然,在google瀏覽器移動端測試iphone6p,開啟的也是沒問題的(這感覺有坑還是要在真機才能發現)

​思索找尋了好久,也有反映margin不起作用的,改成padding就可以,但是改成padding在我這裡是不可取的,因為footer如果給加了padding-bottom:60px屬性,那麼footer的內下邊距就是60px,也就是說有60畫素高的黑背景,如果在頁面內容高度小的頁面,就會出現這樣的情況:

「關於layoutmargins

ios8後,uiview 有個屬性var layoutmargins: uiedgeinsets,用來指定該view的subview同其edge的間距。autolayout使用margins來放置內容。 預設的值為8pt。

如果乙個view是viewcontroller的rootview,系統會自動設定和管理margins,top和bottom margins被設定為0pt,left和right的值根據當前的size class(文末簡單介紹一下size class)不同而不同,可能取值為16或者20pt(iphone6 plus, ipad),你不能修改這些值。」

在我的理解,就是它無視我的margin-bottom:60px;自己給了footer乙個margin-bottom:0px;的屬性(不知我的理解是否正確,希望大神給予指點)​

因為pc和手機端要做成自適應,想到了乙個辦法,就是在footer下邊,加乙個div,給height屬性60px,當螢幕寬度大於1024px的時候,給這個div屬性display:none。

margin屬性總結

margin屬性總結 1.使用 margin 0 auto 的盒子,必須要有width,有明確的width 2.只有標準流中的盒子,才能使用 margin 0 auto 居中,即當乙個盒子浮動了,絕對定位了,固定定位了,都不能使用 margin 0 auto 3.margin 0 auto 是在居中...

jquery Js屬性無效

今天遇到個很奇葩的問題,就是checkbox的onchange時間無效,我一共寫了兩個checkbox的onchange事件,但就是只有乙個能用,本來我以為是jquery的相容問題,但是換成js還是不能用,checked和val都行,就是onchange事件無效,無效的checkbox的id為chk...

由淺入深漫談margin屬性

margin 在中文中我們翻譯成外邊距或者外補白 本文中引用外邊距 他是元素盒模型 box model 的基礎屬性。一 margin的基本特性 margin 屬性包括 margin top,margin right,margin bottom,margin left,margin,可以用來設定 bo...