【轉】web移動端一些經常使用知識

1.去掉 a,input 在移動端瀏覽器中的默認樣式(半透明灰色遮罩陰影)javascript

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button點擊時的藍色外邊框和灰色半透明背景*/
}

2.禁止長按 a,img 標籤長按出現菜單欄css

a, img {
    -webkit-touch-callout: none; /*禁止長按連接與圖片彈出菜單*/
}

3.省略號html

複製代碼
//css單行
.test{
    width:300px;
    overflow: hidden;
    text-overflow:ellipsis;  /* 當字符串超過規定長度,顯示省略符*/
    white-space: nowrap;
}


//多行,不用上js,使用-webkit的私有屬性,-webkit-line-clamp:值number,爲有幾行
.test{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
複製代碼

4.swiper插件(當屏幕旋轉或變化時,從新計算位移)java

observer:true,
observeParents:true,  將observe應用於Swiper的父元素。當Swiper的父元素變化時,例如window.resize,Swiper更新。
swiper.update(true);        //從新計算Wrapper的位移

5.移動端字體android

複製代碼
ios 系統
默認中文字體是Heiti SC
默認英文字體是Helvetica
默認數字字體是HelveticaNeue
無微軟雅黑字體

android 系統
默認中文字體是Droidsansfallback
默認英文和數字字體是Droid Sans
無微軟雅黑字體

winphone 系統
默認中文字體是Dengxian(方正等線體)
默認英文和數字字體是Segoe
無微軟雅黑字體

//使用系統默認的字體所達到的視覺效果跟使用微軟雅黑字體沒有明顯的差異
各個手機系統有本身的默認字體,且都不支持微軟雅黑
如無特殊需求,手機端無需定義中文字體,使用系統默認
英文字體和數字字體可以使用 Helvetica ,三種系統都支持
body{font-family:Helvetica;}
複製代碼

6.CSS3 @font-face  本身定義的Web字體嵌入到你的網頁中ios

在線轉化字體: //https://www.fontsquirrel.com/tools/webfont-generatorgit

複製代碼
@font-face {
    font-family: 'SingleMaltaRegular';              /* name */
    src: url('../fonts/singlemalta-webfont.eot');       /* IE9 Compat Modes */
    src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),    /* IE6-IE8 */
       url('../fonts/singlemalta-webfont.woff') format('woff'),     /* Modern Browsers */
    url('../fonts/singlemalta-webfont.ttf') format('truetype'),     /* Safari, Android, iOS */
    url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');   /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}
//調用
body{font-family: 'SingleMaltaRegular';}
複製代碼

7.移動端click屏幕產生200-300 ms的延遲響應(可以使用touch事件)github

緣由就出在瀏覽器須要如何判斷快速點擊上,當用戶在屏幕上單擊某一個元素時候,例如跳轉連接<a href="#"></a>,此處瀏覽器會先捕獲該次單擊,但瀏覽器不能決定用戶是單純要點擊連接仍是要雙擊該部分區域進行縮放操做.
因此,捕獲第一次單擊後,瀏覽器會先Hold一段時間t,若是在t時間區間裏用戶未進行下一次點擊,則瀏覽器會作單擊跳轉連接的處理,若是t時間裏用戶進行了第二次單擊操做,則瀏覽器會禁止跳轉,轉而進行對該部分區域頁面的縮放操做。
那麼這個時間區間t有多少呢?在IOS safari下,大概爲300毫秒。這就是延遲的由來。形成的後果用戶純粹單擊頁面,頁面須要過一段時間才響應,給用戶慢體驗感受,對於web開發者來講是,頁面js捕獲click事件的回調函數處理,須要300ms後才生效,也就間接致使影響其餘業務邏輯的處理。

8.僞元素改變number類型input框的默認樣式web

複製代碼
input[type=number]::-webkit-textfield-decoration-container {
    background-color: transparent;    
}
input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
}

//webkit表單輸入框placeholder的顏色值
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
複製代碼

9.禁止ios和android用戶選中文字windows

.css{-webkit-user-select:none}

10.模擬按鈕hover效果,激活移動端css的active效果

.btn-blue:active{background-color: #357AE8;}

兼容性ios5+、部分android 4+、winphone 8
要作到全兼容的辦法,可經過綁定ontouchstart和ontouchend來控制按鈕的類名

11.屏幕旋轉的事件和樣式

複製代碼
//判斷手機橫豎屏狀態:
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0) {
        alert('豎屏狀態!');
    }
    if (window.orientation === 90 || window.orientation === -90 ){
        alert('橫屏狀態!');
    }
}, false);

/移動端的瀏覽器通常都支持window.orientation這個參數,經過這個參數能夠判斷出手機是處在橫屏仍是豎屏狀態。 /*css橫屏提醒*/ #transverse {position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8) url(/images/transvers.png) no-repeat center center;background-size:50% auto;} @media all and (orientation : landscape) { #transverse { display:block; } } @media all and (orientation : portrait){ #transverse { display:none; } }
複製代碼

 

12.audio元素和video元素在ios和andriod中沒法自動播放

複製代碼
$('html').one('touchstart',function(){
    audio.play()
})

<!--
1.目前只有ios7+、winphone8+支持自動播放
2.支持Airplay的設備(如:音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放視頻不全屏,ios7+、winphone8+支持,部分android4+支持(含華爲、小米、魅族)
webkit-playsinline="true"
-->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

複製代碼

13.消除transition閃屏

.css{
/*設置內嵌的元素在 3D 空間如何呈現:保留 3D*/
-webkit-transform-style: preserve-3d;
/*(設置進行轉換的元素的背面在面對用戶時是否可見:隱藏)*/
-webkit-backface-visibility: hidden;
}

14.取消input在ios下,輸入的時候英文首字母的默認大寫

<input autocapitalize="off" autocorrect="off" />

15.android 2.3 bug

@-webkit-keyframes 須要以0%開始100%結束,0%的百分號不能去掉
after和before僞類沒法使用動畫animation
border-radius不支持%單位
translate百分比的寫法和scale在一塊兒會致使失效,例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

16.android 4.x bug

三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫
同時設置border-radius和背景色的時候,背景色會溢出到圓角之外部分
部分手機(如三星),a連接支持鼠標:visited事件,也就是說連接訪問後文字變爲紫色
android沒法同時播放多音頻audio

17.Android 4.2.x 背景色溢出

//須要是使用background-clip: padding-box;來修復
.test{
    background-clip: padding-box;
}

18.border-radius兼容寫法

複製代碼
.foo {
    width: 100px;
    height: 100px;
    border: 5px solid blue;
    border-top-left-radius: 999px; /* 左上角 */
    border-top-right-radius: 999px; /* 右上角 */
    border-bottom-right-radius: 999px; /* 右下角 */
    border-bottom-left-radius: 999px; /* 左下角 */
    border-radius: 999px;
    background-color: #ccc;
    background-clip: padding-box;
}
複製代碼

19.如何阻止windows Phone的默認觸摸事件

winphone下默認觸摸事件事件使用e.preventDefault是無效的
目前解決方法是使用樣式來禁用
html{-ms-touch-action: none;}/* 禁止winphone默認觸摸事件 */

20.滑屏框架(適合上下滑屏、左右滑屏等滑屏切換頁面的效果)

slip.js    https://github.com/peunzhang/slip.js
iSlider.js  https://github.com/peunzhang/iSlider
fullpage.js  https://github.com/peunzhang/fullpage
swiper.js  http://www.swiper.com.cn/

21.iscroll.js

解決頁面不支持彈性滾動,不支持fixed引發的問題~
實現下拉刷新,滑屏,縮放等功能~
最新版本已經更新到5.0
官網:http://cubiq.org/iscroll-5

22.解決IOS fixed定位問題(有小瑕疵是會滾動到底部),中間是absolute佈局

複製代碼
function onTouchMove(e) {
    e.preventDefault();
    e.stopPropagation();
};
function onFocus(e) {
    this.main.style.position = 'absolute';
    if (/iphone|ipad|ipod/i.test(navigator.userAgent)) {
        inputMessageBox.style.position = "absolute";
        $HTML.animate({scrollTop:viewHeight});    //中間內容的高度
    };
    document.body.addEventListener('touchmove', onTouchMove, false);
}
function onBlur(e) {
    this.main.style.position = 'fixed';
    document.body.removeEventListener('touchmove', onTouchMove);
}
複製代碼

23.禁止複製、選中文本

Element { 
-webkit-user-select: none; 
-moz-user-select: none; 
-khtml-user-select: none; 
user-select: none; 
}

24.使用遮罩層在一些瀏覽器頂部自帶搜索框時,向下滑動會快速出現一片空白

複製代碼
.mask{
    position:fixed;
    width:100%;
    height:200%;        //高度給高點
    left:0;
    right:0;
    top:0;
    bottom;
    opacity:1
    background-color:#111;
}
這樣在一些瀏覽器頂部自帶搜索框時,向下滑動會快速出現一片空白(瀏覽器頂部自帶搜索框的高度)
全部寬高給高點能夠解決這些bug
複製代碼

25.meta標籤

複製代碼
1.<meta name="apple-mobile-web-app-capable" content="yes">
若是content設置爲yes,Web應用會以全屏模式運行,反之,則不會。content的默認值是no,表示正常顯示。你能夠經過只讀屬性window.navigator.standalone來肯定網頁是否以全屏模式顯示。
兼容性:
iOS 2.1 +

2.<meta name="apple-mobile-web-app-status-bar-style" content="blank">
除非你先使用apple-mobile-web-app-capable指定全屏模式,不然這個meta標籤不會起任何做用。
設置Web App的狀態欄(屏幕頂部欄)的樣式
若是content設置爲default,則狀態欄正常顯示。若是設置爲blank,則狀態欄會有一個黑色的背景。若是設置爲blank-translucent,則狀態欄顯示爲黑色半透明。若是設置爲default或blank,則頁面顯示在狀態欄的下方,即狀態欄佔據上方部分,頁面佔據下方部分,兩者沒有遮擋對方或被遮擋。若是設置爲blank-translucent,則頁面會充滿屏幕,其中頁面頂部會被狀態欄遮蓋住(會覆蓋頁面20px高度,而iphone4和itouch4的Retina屏幕爲40px)。默認值是default。

啓動或禁用自動識別頁面中的電話號碼。
3.<meta name="format-detection" content="telephone=no">
4.<meta name="format-detection" content="email=no">

禁止瀏覽器放大字體
15.<meta name="wap-font-scale" content="no">

UC瀏覽器私有屬性
//設置屏幕方向爲橫屏仍是豎屏
<meta name="screen-orientation" content="portrait|landscape">
//設置是否全屏,yes表示強制瀏覽器全屏
<meta name="full-screen" content="yes">
//縮放不出滾動條,設置爲yes後不出現橫向滾動條。
<meta name="viewport" content="uc-fitscreen=no|yes"/>
//夜間模式disable爲禁用夜間模式
<meta name="nightmode" content="enable|disable"/>
//禁用UC瀏覽器的無圖模式
<meta name="imagemode" content="force"/>
//app模式,使用了application這種應用模式後,頁面講默認全屏,禁止長按菜單,禁止收拾,標準排版,以及強制圖片顯示。
<meta name="browsermode" content="application"/>

QQ瀏覽器私有屬性
//設置屏幕方向爲橫屏仍是豎屏
<meta name="x5-orientation" content="portrait|landscape" />
//設置是否全屏,yes表示強制瀏覽器全屏
<meta name="x5-fullscreen" content="true" />
//app模式
<meta name="x5-page-mode" content="app" />

<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">


添加到主屏(蘋果 IOS Safari)
<!-- 啓用 WebApp 應用全屏模式,這個只會在你保存爲桌面應用後從中打開纔會全屏,在瀏覽器中不會全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--保存某個頁面到桌面的時候的應用標題-->
<meta name="apple-mobile-web-app-title" content="標題">
<!--保存某個頁面到桌面的時候使用這張圖做爲桌面圖標,尺寸和iphone上的一致,是57*57px-->
<link rel="apple-touch-icon" href="custom_icon.png">
<!--啓動圖,只使用一張114*114的圖片便可-->
<link rel="apple-touch-icon-precomposed" href="startup/apple-touch-icon-114x114-precomposed.png" />

避免百度轉碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
複製代碼

13.data URI scheme是在RFC2397中定義的

複製代碼
data URI scheme是在RFC2397中定義的,目的是將一些小的數據,直接嵌入到網頁中,從而不用再從外部文件載入。
目前,Data URI scheme支持的類型有:
data:,文本數據
data:text/plain,文本數據
data:text/html,HTML代碼
data:text/html;base64,base64編碼的HTML代碼
data:text/css,CSS代碼
data:text/css;base64,base64編碼的CSS代碼
data:text/javascript,Javascript代碼
data:text/javascript;base64,base64編碼的Javascript代碼
data:image/gif;base64,base64編碼的gif圖片數據
data:image/png;base64,base64編碼的png圖片數據
data:image/jpeg;base64,base64編碼的jpeg圖片數據
data:image/x-icon;base64,base64編碼的icon圖片數據

把圖像文件的內容直接寫在了HTML 文件中,這樣作的好處是,節省了一個HTTP 請求。壞處是瀏覽器不會緩存這種圖像。如
background:#f0f5f9 url(data:image/png;base64,iVBORw0KGgoAAAANS...SuQmCC) no-repeat 50% 50%
複製代碼
相關文章
相關標籤/搜索