資訊專欄INFORMATION COLUMN
摘要：安卓使用絕對定位布局與原生有沖突如果絕對定位的元素在最下面，鍵盤彈起時(shí)，絕對定位元素會在鍵盤上面解決辦法使用布局實(shí)現(xiàn)，有一個(gè)可使用或者監(jiān)聽事件，將元素隱藏低版本瀏覽器，給設(shè)置之后，將兄弟元素?cái)D出了父元素空間具體原因待查，反正需要給加一個(gè)驗(yàn)
1.安卓使用絕對定位布局與原生input有沖突
如果絕對定位的元素在最下面，鍵盤彈起時(shí)，絕對定位元素會在鍵盤上面
解決辦法：
使用flex布局實(shí)現(xiàn)，有一個(gè)flex-shrink可使用
或者監(jiān)聽resize事件，將元素隱藏
export function adapterPosition(selector) {
if (/iphone/i.test(navigator.userAgent)) return
const h = window.innerHeight;
const dom = document.querySelector(selector)
if (!dom) return
const display = dom.style.display
window.addEventListener("resize", () => {
const height = window.innerHeight
if (height < h) {
dom.style.display = "none"
} else {
dom.style.display = display
}
});
}
2.低版本瀏覽器，給input設(shè)置flex:1之后，將兄弟元素?cái)D出了父元素空間
具體原因待查，反正需要給input加一個(gè)display:block
驗(yàn)證碼
.item {
margin-left: 15px;
box-sizing: border-box;
height: 60px;
padding: 12px 15px 12px 0;
overflow: hidden;
background-color: #fff;
color: #212121;
position: relative;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
border-bottom: 1px solid #f4f4f4;
font-size: 16px;
}
.item .name {
margin-right: 10px;
min-width: 48px;
}
.item .input {
display: block; // 需要加一個(gè)display：block
outline: 0 none;
-webkit-box-flex: 1;
flex: 1;
font-size: 16px;
padding: 0;
border-width: 0;
box-shadow: none;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
3.relative top失效
關(guān)于relative元素top屬性失效的原因，父元素沒有設(shè)置高度，子元素top使用百分比的時(shí)候沒有參照，此時(shí)可以使用px值
4.滾動穿透問題描述：有場景需要mask，但是背景還是可以滾動，即滾動穿透，解決方案如下，主要是獲取頁面的滾動元素并設(shè)置其為fixed
body.no-scroll {
position: fixed;
width: 100%;
}
UtilFn.ModalHelper = function (bodyCls) {
var scrollTop;
var scrollingElement = document.scrollingElement || document.body; // 此寫法兼容webkit，獲取頁面滾動元素
return {
afterOpen: function () {
scrollTop = scrollingElement.scrollTop;
document.body.classList.add(bodyCls);
document.body.style.top = -scrollTop + "px";
},
beforeClose: function () {
document.body.classList.remove(bodyCls);
scrollingElement.scrollTop = scrollTop;
}
};
}
5.瀏覽器對像素 四舍五入的問題
參考 http://web.jobbole.com/84113/
瀏覽器會對小數(shù)點(diǎn)進(jìn)行四舍五入，實(shí)際渲染是四舍五入之后的，但是真實(shí)占用空間是原始大小，四舍五入的那部分值會影響下一個(gè)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/114963.html
摘要：移動端開發(fā)的兼容問題文章已同步我的筆記，歡迎大家加，加后人生更加美好下為屬性設(shè)置會出現(xiàn)樣式文字和背景異常問題。解決方案可以使用整體放大屏幕的倍等等再使用縮放使用在移動端會模糊也需要這樣的解決方案在移動端圖片上傳圖片兼容低端機(jī)的問題。 移動端開發(fā)的兼容問題 文章已同步我的github筆記https://github.com/ymblog/blog，歡迎大家加star~~，加star后人生...
摘要：移動端開發(fā)的兼容問題文章已同步我的筆記，歡迎大家加，加后人生更加美好下為屬性設(shè)置會出現(xiàn)樣式文字和背景異常問題。解決方案可以使用整體放大屏幕的倍等等再使用縮放使用在移動端會模糊也需要這樣的解決方案在移動端圖片上傳圖片兼容低端機(jī)的問題。 移動端開發(fā)的兼容問題 文章已同步我的github筆記https://github.com/ymblog/blog，歡迎大家加star~~，加star后人生...
摘要：移動端開發(fā)的兼容問題文章已同步我的筆記，歡迎大家加，加后人生更加美好下為屬性設(shè)置會出現(xiàn)樣式文字和背景異常問題。解決方案可以使用整體放大屏幕的倍等等再使用縮放使用在移動端會模糊也需要這樣的解決方案在移動端圖片上傳圖片兼容低端機(jī)的問題。 移動端開發(fā)的兼容問題 文章已同步我的github筆記https://github.com/ymblog/blog，歡迎大家加star~~，加star后人生...
摘要：移動端失效需求點(diǎn)擊一個(gè)，讓某一個(gè)聚焦并彈出虛擬鍵盤。安卓可以聚焦，但是不會彈出虛擬鍵盤說明安卓機(jī)的表現(xiàn)也是異常的無法聚焦，也不會彈出虛擬鍵盤所以我的這邊的實(shí)踐結(jié)論是，如果希望在頁面初始化過程中，讓自動聚焦并彈出虛擬鍵盤。 移動端IOS遇到的兼容性問題 和 Mac聯(lián)機(jī)調(diào)試方法 有時(shí)候遇到一些移動端「疑難雜癥」，因?yàn)橐苿佣瞬环奖阏{(diào)試，可能找不到問題點(diǎn)，所以經(jīng)常需要電腦端和移動端聯(lián)機(jī)調(diào)試，...
摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機(jī)制，在端上走的代碼，在端或者微信端上走端對應(yīng)的代碼。對于一個(gè)從零開始的移動端項(xiàng)目，我總結(jié)了以上這些移動開發(fā)難點(diǎn)，希望之后的人能少踩點(diǎn)坑，站在我的肩膀上提高項(xiàng)目開發(fā)的效率和質(zhì)量。 從零搭建移動H5開發(fā)項(xiàng)目實(shí)戰(zhàn) 前端H5的前世今身 在Pc的時(shí)代，前端技術(shù)無疑統(tǒng)治了大多數(shù)用戶的交互界面！而在移動為王的今天，NA開發(fā)在早期占領(lǐng)了大多...
閱讀 1010·2023-04-25 23:40
閱讀 3771·2021-11-22 15:22
閱讀 3622·2021-10-09 09:44
閱讀 3464·2021-09-23 11:52
閱讀 1323·2021-09-22 15:43
閱讀 841·2021-09-10 10:51
閱讀 2273·2021-09-06 15:02
閱讀 3270·2021-09-06 15:02
