META相關下

時間 2019-11-09

標籤 meta 相關欄目 HTML5 简体版

原文原文鏈接

移動端禁止選中內容
若是你不想用戶能夠選中頁面中的內容，那麼你能夠在css中禁掉：
.user-select-none {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all （移動端不須要） */
-ms-user-select: none; /* IE 10+ */
}
18. 移動端取消touch高亮效果
在作移動端頁面時，會發現全部a標籤在觸發點擊時或者全部設置了僞類 :active 的元素，默認都會在激活狀態時，顯示高亮框，若是不想要這個高亮，那麼你能夠經過css如下方法來進行全局的禁止：
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
但這個方法在三星的機子上無效，有一種妥協的方法是把頁面非真實跳轉連接的a標籤換成其它標籤，能夠解決這個問題。
19. 如何禁止保存或拷貝圖像（IOS）
一般當你在手機或者pad上長按圖像 img ，會彈出選項存儲圖像或者拷貝圖像，若是你不想讓用戶這麼操做，那麼你能夠經過如下方法來禁止：
img { -webkit-touch-callout: none; }
20.模擬按鈕hover效果
移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，可是移動設備中並無鼠標指針，使用css的hover並不能知足咱們的需求，還好國外有個激活css的active效果，代碼以下，
<!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>javascript

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

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

//橫屏時使用的樣式
@media all and (orientation:landscape) {
.css{}
}
22.audio元素和video元素在ios和andriod中沒法自動播放
應對方案：觸屏即播
$('html').one('touchstart',function(){
audio.play()
})
23.搖一搖功能
HTML5 deviceMotion：封裝了運動傳感器數據的事件，能夠獲取手機運動狀態下的運動加速度等數據。
24.手機拍照和上傳圖片
<input type="file">的accept 屬性

<input type=file accept="image/*">

<input type=file accept="video/*">
使用總結：
ios 有拍照、錄像、選取本地圖片功能
部分android只有選取本地圖片功能
winphone不支持
input控件默認外觀醜陋
25. 消除transition閃屏
.css{
/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/
-webkit-transform-style: preserve-3d;
/*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/
-webkit-backface-visibility: hidden;
}
開啓硬件加速
解決頁面閃白
保證動畫流暢
.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加速
26. android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}ios

相關標籤/搜索