移動網(wǎng)頁設計問題小結(jié)
Meta標簽：
1、<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
這個想必大家都知道，當頁面在手機上顯示時，增加這個meta可以讓頁面強制讓文檔的寬度與設備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽。
PS：在設置了initial-scale=1 之后，我們終于可以以1:1 的比例進行頁面設計了。關于viewport，還有一個很重要的概念是：iphone 的safari 瀏覽器完全沒有滾動條，而且不是簡單的”隱藏滾動條”，是根本沒有這個功能。iphone 的safari 瀏覽器實際上從一開始就完整顯示了這個網(wǎng)頁，然后用viewport 查看其中的一部分。當你用手指拖動時，其實拖的不是頁面，而是viewport。瀏覽器行為的改變不止是滾動條，交互事件也跟普通桌面不一樣
1、<meta content="telephone=no" name="format-detection" />
2、<meta content="email=no" name="format-detection" />
這兩個屬性分別對ios上自動識別電話和android上自動識別郵箱做了限制。
獲取滾動條的值：
1、window.scrollY window.scrollX
桌面瀏覽器中想要獲取滾動條的值是通過document.scrollTop和document.scrollLeft得到的，但在iOS中你會發(fā)現(xiàn)這兩個屬性是未定義的，為什么呢？因為在iOS中沒有滾動條的概念，在Android中通過這兩個屬性可以正常獲取到滾動條的值，那么在iOS中我們該如何獲取滾動條的值呢？就是上面兩個屬性，但是事實證明android也支持這屬性，所以索性都用woindow.scroll.
禁止選擇文本：
1、-webkit-user-select:none
禁止用戶選擇文本，ios和android都支持
屏蔽陰影：
1、-webkit-appearance:none
親測，可以同時屏蔽輸入框怪異的內(nèi)陰影，解決iOS下無法修改按鈕樣式，測試還發(fā)現(xiàn)一個小問題就是，加了上面的屬性后，iOS下默認還是帶有圓角的，不過可以使用 border-radius屬性修改。
css之border-box：
element{
width: 100%;
padding-left: 10px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
border: 1px solid blue;
}
那我想要一個元素100%顯示，又必須有一個固定的padding-left／padding-right，還有1px的邊框，怎么辦？這樣編寫代碼必然導致出現(xiàn)橫向滾動條，腫么辦？要相信問題就是用來解決的。這時候偉大的css3為我們提供了box-sizing屬性，對于這個屬性的具體解釋不做贅述（想深入了解的同學可以到w3school查看，要知道自己動手會更容易記憶）。讓我們看看如何解決上面的問題：
css3多文本換行：
p {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Webkit支持一個名為-webkit-line-clamp的屬性，參見連接，也就是說這個屬性并不是標準的一部分，可能是Webkit內(nèi)部使用的，或者被棄用的屬性。需要注意的是display需要設置成box，-webkit-line-clamp表示需要顯示幾行。
Retina屏幕高清圖片：
selector {
background-image: url(no-image-set.png);
background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;
}
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背景圖像。
監(jiān)聽link標簽加載css：
var checkProCss = function(){
var intervalFlag;
var timeoutFlag;
var body = $('#js_bar_main');
try {
intervalFlag = setInterval(function(){
if (body.css('cursor') == 'none') {//getComputedStyle
clearInterval(intervalFlag);
clearTimeout(timeoutFlag);
}
}, 200);
timeoutFlag = setTimeout(function(){
clearInterval(intervalFlag);
clearTimeout(timeoutFlag);
Q.monitor(466101);//pro.css沒有拉取成功
}, 6000);//timeout為6s
} catch(e){
clearInterval(intervalFlag);
clearTimeout(timeoutFlag);
}
};
移動端檢測css是否加載完畢，由于
監(jiān)聽link.load
監(jiān)聽link.addEventListener(‘load’, loadHandler, false);
監(jiān)聽link.onreadystatechange
在不同機型上兼容性不同，所以可以利用輪訓來檢測一個dom的css樣式來判斷，如上代碼，在css里定義了一個cursor為none，如果這個css加載失敗就會返回默認的cursor為auto，如果成功就返回css里定義的none。
html5重力感應事件：
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) {
//shake
alert(1);
}
lastX = x;
lastY = y;
lastZ = z;
}
關于deviceMotionEvent是HTML5新增的事件，用來檢測手機重力感應效果具體可參考
http://w3c.github.io/deviceorientation/spec-source-orientation.html
本文地址：http://irelandcustomcontracting.com/tutorial/wd2809.html
