移動端BUG問題及解決方法收集

1. 用rem布局，當line-height等于height時，安卓手機文字偏上，不是垂直居中（ios正常）
改前
  • 將寬度、高度、行高、內邊距、圓角、字體大小等擴大 2 倍，再使用transform進行縮放 0.5 倍，此時字體大大于12px。
改后
//原
.labels {
    width: 0.7rem;
    height: 0.3rem;
    line-height: 0.3rem;
    color: #0ba300;
    font-size: 0.2rem;
    box-sizing: border-box;
}
//改
.labels {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.4rem;
    height: 0.6rem;
    line-height: normal;
    font-size: 0.4rem;
    color: #0ba300;
    transform: scale(0.5);
    transform-origin: left top;
    box-sizing: border-box;
}
2. 圖片在手機瀏覽器上單擊或者雙擊會放大預覽問題
  • 解決方法：在img標簽外面包一層a標簽，并且把雙擊事件禁止掉，完美解決。
<a href="javascript:;"  ondblclick="return false;"><img src="img1.png" alt=""/></a>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1贊 92
  • 剛開始做移動端web開發的同學應該都碰到過頁面適配問題，為什么我在開發手機上調試好的頁面在其他手機會有這樣或那樣的...
    留七七閱讀 19,491評論 5贊 80
  • 前言 對于熟悉pc端的小伙伴來說,對于靜態頁面的布局,一般都是沒有什么問題的,為了保持各瀏覽器顯示的一致性,無論是...
    itclanCoder閱讀 13,704評論 5贊 61
  • 1、今天還可以，全天完成10個番茄鐘，其中 有3個公考番茄鐘； 2、未來還需要慢慢加強，找到感覺。
    福_三道閱讀 153評論 0贊 0
  • 長著長毛的馬。
    畫師昊淵閱讀 1,414評論 2贊 10