移動Web開發技巧--下

時間 2019-11-11

標籤移動 web 開發技巧欄目無線简体版

原文原文鏈接

20.模擬按鈕hover效果移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，可是移動設備中並無鼠標指針，使用css的hover並不能知足咱們的需求，還好國外有個激活css的active效果，代碼以下，javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
</style>
</head>
<body>

<div class="btn-blue">按鈕</div>

<script type="text/javascript">
document.addEventListener("touchstart", function(){}, true)
</script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue-on{background-color: #357AE8;}
</style>
</head>
<body>

<div class="btn-blue">按鈕</div>

<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
    this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
    this.className = "btn-blue"
}
</script>
</body>
</html>

21.屏幕旋轉的事件和樣式事件
window.orientation，取值：正負90表示橫屏模式、0和180表現爲豎屏模式；css

window.onorientationchange = function(){
            switch(window.orientation){
                case -90:
                case 90:
                alert("橫屏:" + window.orientation);
                case 0:
                case 180:
                alert("豎屏:" + window.orientation);
                break;
            }
}

樣式html

//豎屏時使用的樣式 @media all and (orientation:portrait) {
    .css{}
}
 //橫屏時使用的樣式 @media all and (orientation:landscape) {
    .css{}
}

22.audio元素和video元素在ios和andriod中沒法自動播放應對方案：觸屏即播前端

$('html').one('touchstart',function(){
    audio.play()
})

23.搖一搖功能 HTML5 deviceMotion：封裝了運動傳感器數據的事件，能夠獲取手機運動狀態下的運動加速度等數據。
24.手機拍照和上傳圖片html5

<input type="file">

的accept 屬性java

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

使用總結：
ios 有拍照、錄像、選取本地圖片功能
部分android只有選取本地圖片功能
winphone不支持
input控件默認外觀醜陋jquery

消除transition閃屏

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

開啓硬件加速
解決頁面閃白
保證動畫流暢android

.css {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

設計高性能CSS3動畫的幾個要素
儘量地使用合成屬性transform和opacity來設計CSS3動畫，
不使用position的left和top來定位
利用translate3D開啓GPU加速ios

android 上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}

框架 1. 移動端基礎框架 zepto.js 語法與jquery幾乎同樣，會jquery基本會zepto~
iscroll.js 解決頁面不支持彈性滾動，不支持fixed引發的問題~ 實現下拉刷新，滑屏，縮放等功能~

underscore.js 該庫提供了一整套函數式編程的實用功能，可是沒有擴展任何JavaScript內置對象。

fastclick 加快移動端點擊響應時間
animate.css CSS3動畫效果庫

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

slip.js
iSlider.js
fullpage.js
3.瀑布流框架 masonry
工具推薦 caniuse 各瀏覽器支持html5屬性查詢
paletton 調色搭配

轉載請註明：前端錄»移動Web開發技巧--下
轉載於猿2048:➵《移動Web開發技巧--下》

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。