久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

分享

移動(dòng)web問(wèn)題小結(jié) | Web前端 騰訊AlloyTeam Blog | 愿景: 成為地球卓越的Web團(tuán)隊(duì),!

 JhouShuai 2016-04-03

原文地址:http://www./2015/06/yi-dong-web-wen-ti-xiao-jie/#comments

Meta標(biāo)簽:

1
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

這個(gè)想必大家都知道,,當(dāng)頁(yè)面在手機(jī)上顯示時(shí),增加這個(gè)meta可以讓頁(yè)面強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1,,并且文檔最大的寬度比例是1.0,,且不允許用戶點(diǎn)擊屏幕放大瀏覽,。

1
2
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />

這兩個(gè)屬性分別對(duì)ios上自動(dòng)識(shí)別電話和android上自動(dòng)識(shí)別郵箱做了限制。

 

 獲取滾動(dòng)條的值:

1
window.scrollY  window.scrollX

桌面瀏覽器中想要獲取滾動(dòng)條的值是通過(guò)document.scrollTop和document.scrollLeft得到的,,但在iOS中你會(huì)發(fā)現(xiàn)這兩個(gè)屬性是未定義的,,為什么呢?因?yàn)樵趇OS中沒(méi)有滾動(dòng)條的概念,,在Android中通過(guò)這兩個(gè)屬性可以正常獲取到滾動(dòng)條的值,,那么在iOS中我們?cè)撊绾潍@取滾動(dòng)條的值呢?就是上面兩個(gè)屬性,,但是事實(shí)證明android也支持這屬性,,所以索性都用woindow.scroll.

 

禁止選擇文本:

1
-webkit-user-select:none

禁止用戶選擇文本,ios和android都支持

 

屏蔽陰影:

1
-webkit-appearance:none

親測(cè),,可以同時(shí)屏蔽輸入框怪異的內(nèi)陰影,,解決iOS下無(wú)法修改按鈕樣式,測(cè)試還發(fā)現(xiàn)一個(gè)小問(wèn)題就是,,加了上面的屬性后,,iOS下默認(rèn)還是帶有圓角的,不過(guò)可以使用 border-radius屬性修改,。

 

 css之border-box:

1
2
3
4
5
6
7
element{
        width: 100%;
        padding-left: 10px;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        border: 1px solid blue;
}

那我想要一個(gè)元素100%顯示,,又必須有一個(gè)固定的padding-left/padding-right,還有1px的邊框,,怎么辦,?這樣編寫代碼必然導(dǎo)致出現(xiàn)橫向滾動(dòng)條,腫么辦,?要相信問(wèn)題就是用來(lái)解決的,。這時(shí)候偉大的css3為我們提供了box-sizing屬性,對(duì)于這個(gè)屬性的具體解釋不做贅述(想深入了解的同學(xué)可以到w3school查看,,要知道自己動(dòng)手會(huì)更容易記憶),。讓我們看看如何解決上面的問(wèn)題:

 

 css3多文本換行:

1
2
3
4
5
6
7
p {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

Webkit支持一個(gè)名為-webkit-line-clamp的屬性,參見鏈接,,也就是說(shuō)這個(gè)屬性并不是標(biāo)準(zhǔn)的一部分,,可能是Webkit內(nèi)部使用的,或者被棄用的屬性,。需要注意的是display需要設(shè)置成box,,-webkit-line-clamp表示需要顯示幾行。

 

 Retina屏幕高清圖片:

1
2
3
4
selector {
  background-image: url(no-image-set.png);
  background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;
}

image-set的語(yǔ)法,,類似于不同的文本,,圖像也會(huì)顯示成不同的:

  1.  不支持image-set:在不支持image-set的瀏覽器下,他會(huì)支持background-image圖像,,也就是說(shuō)不支持image-set的瀏覽器下,,他們解析background-image中的背景圖像,;
  2.  支持image-set:如果你的瀏覽器支持image-sete,而且是普通顯屏下,,此時(shí)瀏覽器會(huì)選擇image-set中的@1x背景圖像,;
  3.  Retina屏幕下的image-set:如果你的瀏覽器支持image-set,而且是在Retina屏幕下,,此時(shí)瀏覽器會(huì)選擇image-set中的@2x背景圖像,。

 

 

 html5重力感應(yīng)事件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if (window.DeviceMotionEvent) {
                 window.addEventListener('devicemotion',deviceMotionHandler, false);  
        }
        var speed = 30;//speed
        var x = y = z = lastX = lastY = lastZ = 0;
        function deviceMotionHandler(eventData) {  
          var acceleration =event.accelerationIncludingGravity;
                x = acceleration.x;
                y = acceleration.y;
                z = acceleration.z;
                if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
                    //簡(jiǎn)單的搖一搖觸發(fā)代碼
                    alert(1);
                }
                lastX = x;
                lastY = y;
                lastZ = z;
        }

關(guān)于deviceMotionEvent是HTML5新增的事件,用來(lái)檢測(cè)手機(jī)重力感應(yīng)效果具體可參考http://w3c./deviceorientation/spec-source-orientation.html

 

移動(dòng)端touch事件:

  • touchstart //當(dāng)手指接觸屏幕時(shí)觸發(fā)
  • touchmove //當(dāng)已經(jīng)接觸屏幕的手指開始移動(dòng)后觸發(fā)
  • touchend //當(dāng)手指離開屏幕時(shí)觸發(fā)
  • touchcancel//當(dāng)某種touch事件非正常結(jié)束時(shí)觸發(fā)

這4個(gè)事件的觸發(fā)順序?yàn)椋?

touchstart -> touchmove ->  touchend ->touchcancel

對(duì)于某些android系統(tǒng)touch的bug:

比如手指在屏幕由上向下拖動(dòng)頁(yè)面時(shí),,理論上是會(huì)觸發(fā) 一個(gè) touchstart ,,很多次 touchmove ,和最終的 touchend ,,可是在android 4.0上,,touchmove只被觸發(fā)一次,觸發(fā)時(shí)間和touchstart 差不多,,而touchend直接沒(méi)有被觸發(fā),。這是一個(gè)非常嚴(yán)重的bug,在google Issue已有不少人提出 ,這個(gè)很蛋疼的bug是在模擬下拉刷新是遇到的尤其當(dāng)touchmove的dom節(jié)點(diǎn)數(shù)量變多時(shí)比出現(xiàn),,當(dāng)時(shí)解決辦法就是用settimeout來(lái)稀釋touchmove,。

 

單擊延遲:

click 事件因?yàn)橐却p擊確認(rèn),會(huì)有 300ms 的延遲,,體驗(yàn)并不是很好。

開發(fā)者大多數(shù)會(huì)使用封裝的 tap 事件來(lái)代替click 事件,,所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成,。

Creating Fast Buttons for Mobile Web Applications

Eliminate 300ms delay on click events in mobile Safari

 

IOS里面fixed的文本框焦點(diǎn)居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
    <head>
    input {
       position:fixed;
       top:0;left:0;
    }
    </head>
    <body>
        <div class="header">
            <form action="">
                <label>Testfield: <input type="text" /></label>
            </form>
        </div>
    </body>
</html>

在ios里面,當(dāng)一個(gè)文本框的樣式為fixed時(shí)候,,如果這個(gè)文本框獲得焦點(diǎn),,它的位置就會(huì)亂掉,由于ios里面做了自適應(yīng)居中,,這個(gè)fixed的文本框會(huì)跑到頁(yè)面中間,。類似:

 

解決辦法有兩個(gè):

可以在文本框獲得焦點(diǎn)的時(shí)候?qū)ixed改為absolute,失去焦點(diǎn)時(shí)在改回fixed,,但是這樣會(huì)讓屏幕有上下滑動(dòng)的體驗(yàn)不太好,。

1
2
3
4
5
6
7
8
9
10
.fixfixed {
position:absolute;
}
$(document)
    .on('focus', 'input', function(e) {
        $this.addClass('fixfixed');
    })
    .on('blur', 'input', function(e) {
        $this.removeClass('fixfixed');
    });

 

還有一種就是用一個(gè)假的fixed的文本框放在頁(yè)面頂部,一個(gè)absolute的文本框隱藏在頁(yè)面頂部,,當(dāng)fixed的文本框獲得焦點(diǎn)時(shí)候?qū)⑵潆[藏,,然后顯示absolute的文本框,當(dāng)失去焦點(diǎn)時(shí),,在把a(bǔ)bsolute的文本框隱藏,,fixed的文本框顯示,。

1
2
3
4
5
6
7
8
9
10
11
12
.fixfixed {
position:absolute;
}
$(document)
    .on('focus', 'input', function(e) {
        $absolute..show();
        $this.hide();
    })
    .on('blur', 'input', function(e) {
         $fixed..show();
        $this.hide();
    });

 

最后一種就是頂部的input不參與滾動(dòng),只讓其下面滾動(dòng),。

 

position:sticky

position:sticky是一個(gè)新的css3屬性,,它的表現(xiàn)類似position:relative和position:fixed的合體,在目標(biāo)區(qū)域在屏幕中可見時(shí),,它的行為就像position:relative; 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí),,它的表現(xiàn)就像position:fixed,它會(huì)固定在目標(biāo)位置,。

1
2
3
4
5
.sticky {
position: -webkit-sticky;
position:sticky;
top: 15px;
}

瀏覽器兼容性

由于這是一個(gè)全新的屬性,,以至于到現(xiàn)在都沒(méi)有一個(gè)規(guī)范,W3C也剛剛開始討論它,,而現(xiàn)在只有webkit nightly版本和chrome 開發(fā)版(Chrome 23.0.1247.0+ Canary)才開始支持它,。

另外需要注意的是,如果同時(shí)定義了left和right值,,那么left生效,,right會(huì)無(wú)效,同樣,,同時(shí)定義了top和bottom,,top贏~~

移動(dòng)端點(diǎn)透事件

簡(jiǎn)單的說(shuō),由于在移動(dòng)端我們經(jīng)常會(huì)使用tap(touchstart)事件來(lái)替換掉click事件,,那么就會(huì)有一種場(chǎng)景是:

1
2
3
<div id="mengceng"></div>
<a href="www.qq.com">www.qq.com</a>

div是絕對(duì)定位的蒙層z-index高于a,,而a標(biāo)簽是頁(yè)面中的一個(gè)鏈接,我們給div綁定tap事件:

1
2
3
$('#mengceng').on('tap',function(){
$('#mengceng').hide();
});

我們點(diǎn)擊蒙層時(shí) div正常消失,,但是當(dāng)我們?cè)赼標(biāo)簽上點(diǎn)擊蒙層時(shí),,發(fā)現(xiàn)a鏈接被觸發(fā),這就是所謂的點(diǎn)透事件,。

原因:

touchstart 早于 touchend 早于 click,。亦即click的觸發(fā)是有延遲的,這個(gè)時(shí)間大概在300ms左右,,也就是說(shuō)我們tap觸發(fā)之后蒙層隱藏,,此時(shí)click還沒(méi)有觸發(fā),300ms之后由于蒙層隱藏,,我們的click觸發(fā)到了下面的a鏈接上,。

解決辦法:

1 盡量都使用touch事件來(lái)替換click事件。

2 阻止a鏈接的click的preventDefault

 

base64編碼圖片替換url圖片

u在移動(dòng)端,,網(wǎng)絡(luò)請(qǐng)求是很珍貴的資源,,尤其在2g或者3g網(wǎng)絡(luò)下,所以能不發(fā)請(qǐng)求的資源都盡量不要發(fā),,對(duì)于一些小圖片icon之類的,,可以將圖片用base64編碼,,來(lái)減少網(wǎng)絡(luò)請(qǐng)求。

 

手機(jī)拍照和上傳圖片

<input type="file">的accept 屬性

1
2
3
4
<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視頻 -->
<input type=file accept="video/*">

 

動(dòng)畫效果時(shí)開啟硬件加速

我們?cè)谥谱鲃?dòng)畫效果時(shí)經(jīng)常會(huì)想要改版元素的top或者left來(lái)讓元素動(dòng)起來(lái),,在pc端還好但是移動(dòng)端就會(huì)有較大的卡頓感,,這么我們需要使用css3的  transform: translate3d;來(lái)替換,

此效果可以讓瀏覽器開啟gpu加速,,渲染更流暢,,但是筆著實(shí)驗(yàn)時(shí)在ios上體驗(yàn)良好,但在一些低端android機(jī)型可能會(huì)出現(xiàn)意想不到的效果,。

 

快速回彈滾動(dòng)

在iOS上如果你想讓一個(gè)元素?fù)碛邢?Native 的滾動(dòng)效果,,你可以這樣做:

1
2
3
4
.div {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

經(jīng)筆著測(cè)試,此效果在不同的ios系統(tǒng)表現(xiàn)不一致,,

對(duì)于局部滾動(dòng),,ios8以上,不加此效果,,滾動(dòng)的超級(jí)慢,,ios8一下,不加此效果,,滾動(dòng)還算比較流暢

對(duì)于body滾動(dòng),,ios8以上,不加此效果同樣擁有彈性滾動(dòng)效果,。

 

持續(xù)更新中,。。

ios和android局部滾動(dòng)時(shí)隱藏原生滾動(dòng)條

android

1
2
3
::-webkit-scrollbar{
    opacity: 0;
}

ios

使用一個(gè)稍微高一些div包裹住這個(gè)有滾動(dòng)條的div然后設(shè)置overflow:hidden擋住之

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrap{
    height: 100px;
    overflow: hidden;
}
.box{
    width: 100%;
    height: -webkit-calc(100% + 5px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
<div class="wrap">
    <div class="box"></div>
</div>

設(shè)置placeholder時(shí)候 focus時(shí)候文字沒(méi)有隱藏

1
2
3
input:focus::-webkit-input-placeholder{
    opacity: 0;
}

移動(dòng)端不同的input對(duì)應(yīng)不同的鍵盤展示樣式

ios —- android

type email

type url

type tel

type search

 

background-image和image的加載區(qū)別

在網(wǎng)頁(yè)加載的過(guò)程中,,以css背景圖存在的圖片background-image會(huì)等到結(jié)構(gòu)加載完成(網(wǎng)頁(yè)的內(nèi)容全部顯示以后)才開始加載,,而html中的標(biāo)簽img是網(wǎng)頁(yè)結(jié)構(gòu)(內(nèi)容)的一部分會(huì)在加載結(jié)構(gòu)的過(guò)程中加載,換句話講,,網(wǎng)頁(yè)會(huì)先加載標(biāo)簽img的內(nèi)容,再加載背景圖片background-image,,如果你用引入了一個(gè)很大的圖片,,那么在這個(gè)圖片下載完成之前,img后的內(nèi)容都不會(huì)顯示,。而如果用css來(lái)引入同樣的圖片,,網(wǎng)頁(yè)結(jié)構(gòu)和內(nèi)容加載完成之后,才開始加載背景圖片,,不會(huì)影響你瀏覽網(wǎng)頁(yè)內(nèi)容,。

未完待續(xù)

參考資料:http://www./index.php/archives/455

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,,不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多