移動web問題小結

時間 2019-12-05

標籤移動 web 問題小結欄目無線简体版

原文原文鏈接

Meta標籤：

Crayon Syntax Highlighter v2.7.1php

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

[Format Time: 0.0019 seconds]css

這個想必你們都知道，當頁面在手機上顯示時，增長這個meta可讓頁面強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽。html

Crayon Syntax Highlighter v2.7.1html5

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

[Format Time: 0.0008 seconds]android

這兩個屬性分別對ios上自動識別電話和android上自動識別郵箱作了限制。ios

獲取滾動條的值：

Crayon Syntax Highlighter v2.7.1css3

1	window.scrollY window.scrollX

[Format Time: 0.0004 seconds]git

桌面瀏覽器中想要獲取滾動條的值是經過document.scrollTop和document.scrollLeft獲得的，但在iOS中你會發現這兩個屬性是未定義的，爲何呢？由於在iOS中沒有滾動條的概念，在Android中經過這兩個屬性能夠正常獲取到滾動條的值，那麼在iOS中咱們該如何獲取滾動條的值呢？就是上面兩個屬性，可是事實證實android也支持這屬性，因此索性都用woindow.scroll.github

禁止選擇文本：

Crayon Syntax Highlighter v2.7.1web

1	-webkit-user-select:none

[Format Time: 0.0003 seconds]

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

屏蔽陰影：

Crayon Syntax Highlighter v2.7.1

1	-webkit-appearance:none

[Format Time: 0.0003 seconds]

親測，能夠同時屏蔽輸入框怪異的內陰影，解決iOS下沒法修改按鈕樣式，測試還發現一個小問題就是，加了上面的屬性後，iOS下默認仍是帶有圓角的，不過可使用 border-radius屬性修改。

css之border-box：

Crayon Syntax Highlighter v2.7.1

element{

width: 100%;

padding-left: 10px;

box-sizing:border-box;

-webkit-box-sizing:border-box;

border: 1px solid blue;

}

[Format Time: 0.0013 seconds]

那我想要一個元素100%顯示，又必須有一個固定的padding-left／padding-right，還有1px的邊框，怎麼辦？這樣編寫代碼必然致使出現橫向滾動條，腫麼辦？要相信問題就是用來解決的。這時候偉大的css3爲咱們提供了box-sizing屬性，對於這個屬性的具體解釋不作贅述（想深刻了解的同窗能夠到w3school查看，要知道本身動手會更容易記憶）。讓咱們看看如何解決上面的問題：

css3多文本換行：

Crayon Syntax Highlighter v2.7.1

p {

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}

[Format Time: 0.0012 seconds]

Webkit支持一個名爲-webkit-line-clamp的屬性，參見連接，也就是說這個屬性並非標準的一部分，多是Webkit內部使用的，或者被棄用的屬性。須要注意的是display須要設置成box，-webkit-line-clamp表示須要顯示幾行。

Retina屏幕高清圖片：

Crayon Syntax Highlighter v2.7.1

selector {

background-image: url(no-image-set.png);

background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;

}

[Format Time: 0.0014 seconds]

image-set的語法，相似於不一樣的文本，圖像也會顯示成不一樣的：

不支持image-set ：在不支持image-set的瀏覽器下，他會支持background-image圖像，也就是說不支持image-set的瀏覽器下，他們解析background-image中的背景圖像；
支持image-set ：若是你的瀏覽器支持image-sete，並且是普通顯屏下，此時瀏覽器會選擇image-set中的@1x背景圖像；
Retina屏幕下的image-set ：若是你的瀏覽器支持image-set，並且是在Retina屏幕下，此時瀏覽器會選擇image-set中的@2x背景圖像。

html5重力感應事件：

Crayon Syntax Highlighter v2.7.1

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) {

//簡單的搖一搖觸發代碼

alert(1);

}

lastX = x;

lastY = y;

lastZ = z;

}

[Format Time: 0.0046 seconds]

關於deviceMotionEvent是HTML5新增的事件，用來檢測手機重力感應效果具體可參考 http://w3c.github.io/deviceorientation/spec-source-orientation.html

移動端touch事件：

touchstart //當手指接觸屏幕時觸發
touchmove //當已經接觸屏幕的手指開始移動後觸發
touchend //當手指離開屏幕時觸發
touchcancel//當某種touch事件非正常結束時觸發

這4個事件的觸發順序爲：

touchstart -> touchmove -> touchend ->touchcancel

對於某些android系統touch的bug:

好比手指在屏幕由上向下拖動頁面時，理論上是會觸發一個 touchstart ，不少次 touchmove ，和最終的 touchend ，但是在android 4.0上，touchmove只被觸發一次，觸發時間和touchstart 差很少，而touchend直接沒有被觸發。這是一個很是嚴重的bug，在google Issue 已有很多人提出 ,這個很蛋疼的bug是在模擬下拉刷新是遇到的尤爲當touchmove的dom節點數量變多時比出現，當時解決辦法就是用settimeout來稀釋touchmove。

單擊延遲：

click 事件由於要等待雙擊確認，會有 300ms 的延遲，體驗並非很好。

開發者大多數會使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。

Creating Fast Buttons for Mobile Web Applications

Eliminate 300ms delay on click events in mobile Safari

IOS裏面fixed的文本框焦點居中

Crayon Syntax Highlighter v2.7.1

<!DOCTYPE html>

<head>

input {

position:fixed;

top:0;left:0;

}

</head>

<body>

<label>Testfield: <input type="text" /></label>

</form>

</div>

</body>

</html>

[Format Time: 0.0023 seconds]

在ios裏面，當一個文本框的樣式爲fixed時候，若是這個文本框得到焦點，它的位置就會亂掉，因爲ios裏面作了自適應居中，這個fixed的文本框會跑到頁面中間。相似：

解決辦法有兩個：

能夠在文本框得到焦點的時候將fixed改成absolute，失去焦點時在改回fixed，可是這樣會讓屏幕有上下滑動的體驗不太好。

Crayon Syntax Highlighter v2.7.1

.fixfixed {

position:absolute;

}

$(document)

.on('focus', 'input', function(e) {

$this.addClass('fixfixed');

})

.on('blur', 'input', function(e) {

$this.removeClass('fixfixed');

});

[Format Time: 0.0017 seconds]

還有一種就是用一個假的fixed的文本框放在頁面頂部，一個absolute的文本框隱藏在頁面頂部，當fixed的文本框得到焦點時候將其隱藏，而後顯示absolute的文本框，當失去焦點時，在把absolute的文本框隱藏，fixed的文本框顯示。

Crayon Syntax Highlighter v2.7.1

.fixfixed {

position:absolute;

}

$(document)

.on('focus', 'input', function(e) {

$absolute..show();

$this.hide();

})

.on('blur', 'input', function(e) {

$fixed..show();

$this.hide();

});

[Format Time: 0.0031 seconds]

最後一種就是頂部的input不參與滾動，只讓其下面滾動。

position:sticky

position:sticky是一個新的css3屬性，它的表現相似position:relative和position:fixed的合體，在目標區域在屏幕中可見時，它的行爲就像position:relative; 而當頁面滾動超出目標區域時，它的表現就像position:fixed，它會固定在目標位置。

Crayon Syntax Highlighter v2.7.1