記錄手機端h5頁面碰到的一些問題

hearaway 發布于2019-08-30 14:19 / 1070人閱讀

摘要：關于光標在手機端偏移問題根本不要使用垂直居中。解決方法可直接定義，然后高度由上下值撐開。

關于input光標在手機端偏移

問題根本：不要使用line-height垂直居中。
解決方法：可直接定義height，然后高度由上下padding值撐開。

移動端清除input光標

ios input 添加 readonly unselectable=”on” 屬性，光標依舊還在

input聚焦時馬上讓它失焦，代碼

$("input[readonly]").on("focus", function() {
    $(this).trigger("blur");
});

親測在蘋果手機可行

div不知道高寬的情況下居中

支持微信瀏覽器的translate寫法其他瀏覽器需要加上-ms- -moz- -webkit- -o-

.parentDiv{
  position:relative;
}
.childDiv{
  width:100px;
  height:100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

手機端彈框背景的透明黑底背景樣式

.maskin{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
}

css實現單行、多行顯示省略號

//單行
div{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

css實現圖片正方形加載

在vue中可以使用內聯樣式循環img :style="{backgroundImage: "url("+ img +")"}"

url-div {
   width:100px;
   height:100px;
   background-image: url();
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
}

移動端1px問題

.border-1px {
    position: relative;
}
.border-1px:after {
    position: absolute;
    content: "";
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-bottom: 1px solid #666;
}

移動端字體設置

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;

}

移動端meta設置

碰到問題還會記錄

GPU云服務器云服務器 java自學碰到一些困難服務器巡檢碰到的問題手機端webrtc h5 手機端頁面html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115934.html

記錄手機端h5頁面碰到的一些問題

摘要：關于光標在手機端偏移問題根本不要使用垂直居中。解決方法可直接定義，然后高度由上下值撐開。關于input光標在手機端偏移問題根本：不要使用line-height垂直居中。解決方法：可直接定義height，然后高度由上下padding值撐開。移動端清除input光標 ios input 添加 readonly unselectable=on 屬性，光標依舊還在 input聚焦時馬上...

cheukyin 2019-08-02 10:04 評論0 收藏0
Hybrid APP架構設計思路

摘要：本文將從以下幾個方面闡述架構設計的一些經驗和思考。原文及討論請到通訊作為一種跨語言開發模式，通訊層是架構首先應該考慮和設計的，往后所有的邏輯都是基于通訊層展開。關于Hybrid模式開發app的好處，網絡上已有很多文章闡述了，這里不展開。本文將從以下幾個方面闡述Hybrid app架構設計的一些經驗和思考。原文及討論請到 github issue 通訊作為一種跨語言開發模式，通訊...

hiyayiji 2019-08-19 17:19 評論0 收藏0
wap html5播放器和直播開發小結

摘要：此文已由作者吳家聯授權網易云社區發布。歡迎訪問網易云社區，了解更多網易技術產品運營經驗。播放器的設計思路重構后應該包含這些功能支持點播非加密的和直播播放兼容適配移動端根據平臺自動選擇使用還是。直播的一些特點直播狀態的判斷。此文已由作者吳家聯授權網易云社區發布。歡迎訪問網易云社區，了解更多網易技術產品運營經驗。去年年中的時候，借著產品改版的機會，將之前的h5播放器好好整理重構了一番...

Miyang 2019-06-28 11:01 評論0 收藏0
關于移動端基礎布局概念方式和常見問題總結 (不定時更新)

摘要：前言本來是打算寫寫怎么使用進行移動端的布局的然后前面還加些像素基本知識鋪墊后面又加了些屬性概念最后還來些常見布局問題和系統樣式果然排版也是門高深學問這里有些自己寫的有些看完之后總結出來的還有些別人那里搬來的順帶會送上飛機票告訴你們來源在哪前言本來是打算寫寫怎么使用 lib-flexible 進行移動端的布局的, 然后前面還加些像素基本知識鋪墊, 后面又加了些 CSS 屬性概念, 最...

chenjiang3 2019-08-30 15:44 評論0 收藏0