html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
自動調整設備寬度
<!-- H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面 -->
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
鏈接點擊時有邊框
/* android、IOS 點擊一個鏈接時 **會出現一個邊框** 或者半透明灰色遮罩 */
a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
不自動識別電話或email。
<!-- 忽略識別號碼 -->
<meta name="format-detection" content="telephone=no">
<!-- 忽略識別email -->
<meta content="email=no" name="format-detection">
移動端200-300ms的延遲響應
<!-- 1. fastclick可以解決在手機上點擊事件的300ms延遲 -->
<!-- 2. zepto的touch模塊，tap事件也是爲了解決在click的延遲問題 -->
拉動滾動條時延遲或卡頓
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
禁止複製或選中文本
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
長時間按住頁面出現閃退
element { -webkit-touch-callout: none; }
輸入框默認內陰影
element{ -webkit-appearance: none; }
某些安卓手機圓角失效
element{ background-clip: padding-box; }
頂部狀態欄背景色
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 注意：除非你先使用apple-mobile-web-app-capable指定全屏模式否則這個meta標籤不會起任何作用。 -->
設置緩存
<meta http-equiv="Cache-Control" content="no-cache" />
<!-- 手機頁面通常在第一次加載後會進行緩存然後每次刷新會使用緩存而不是去重新向服務器發送請求。 -->
<!-- 如果不希望使用緩存可以設置no-cache。 -->
旋轉時字體大小調整
html, body, p, div {
-webkit-text-size-adjust:100%;
}
按鈕樣式被默認樣式覆蓋
input,
textarea {
border: 0;
-webkit-appearance: none;
}
默認首字母大寫
<!-- IOS鍵盤字母輸入，默認首字母大寫 -->
<input type="text" autocapitalize="off" />
行高無法垂直居中的問題
html{-webkit-text-size-adjust:none;}
改變placeholder的字體顏色
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
禁止長按觸發系統菜單
.css
{-webkit-touch-callout: none}
下拉選擇設右對齊
select option {
direction: rtl;
}
出現一個六分之一空格
this.value = this.value.replace(/\u2006/g, '');
動畫定義3D硬件加速
element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
Retina屏的1px邊框
element{
border-width: thin;
}
transition閃屏
{
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility:hidden;}
不支持 placeholder 問題
<!-- 移動端 HTML5 input date 不支持 placeholder 問題 -->
<input placeholder="Date" class="textbox-n" type="text" οnfοcus="(this.type='date')" id="date">
瀏覽器私有及其它meta
QQ瀏覽器私有
<!-- 全屏模式 -->
<meta name="x5-fullscreen" content="true">
<!-- 強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- 強制橫屏 -->
<meta name="x5-orientation" content="landscape">
<!-- 應用模式 -->
<meta name="x5-page-mode" content="app">
UC瀏覽器私有
<!-- 全屏模式 -->
<meta name="full-screen" content="yes">
<!-- 強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- 強制橫屏 -->
<meta name="screen-orientation" content="landscape">
<!-- 應用模式 -->
<meta name="browsermode" content="application">
IOS中關於鍵盤事件
<!--
業務需求：
當用input search做模糊搜索的時候，
在鍵盤裏面輸入關鍵詞，會通過ajax後臺查詢，然後返回數據，
然後再對返回的數據進行關鍵詞標紅。
-->
<!--
問題原因：
用input監聽鍵盤keyup事件，在安卓手機瀏覽器中是可以的，
但是在ios手機瀏覽器中變紅很慢，用輸入法輸入之後，
並未立刻相應keyup事件，只有在通過刪除之後才能相應！
-->
<!--
解決辦法：
可以用html5的oninput事件去代替keyup
-->
<input type="text" id="testInput">
<script type="text/javascript">
document.getElementById('testInput').addEventListener('input', function(e){
var value = e.target.value;
});
</script>
<!-- 然後就達到類似 keyup 的效果！ -->
圖片加載慢怎麼辦
<!-- 對這種情況，手機開發一般用canvas方法加載： -->
<!-- 具體的canvas API 參見：http://javascript.ruanyifeng.com/htmlapi/canvas.html -->
喚起select的option展開
$(sltElement).trrgger("mousedown");
function showDropdown(sltElement) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
sltElement.dispatchEvent(event);
};
判斷手機的類型
var user="";
if (/android/i.test(navigator.userAgent)){
// android
user="1";
}
if (/ipad|iphone|mac/i.test(navigator.userAgent)){
// ios
user="0";
}
判斷是否來自微信瀏覽器
function isFromWeiXin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
}
return false;
}
屏幕旋轉的事件
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("橫屏:" + window.orientation);
case 0:
case 180:
alert("豎屏:" + window.orientation);
break;
}
}
屏幕旋轉時如何操作
@media all and (orientation:portrait) {
.css
{}
}
@media all and (orientation:landscape) {
.css
{}
}
video無法自動播放
$('html').one('touchstart',function(){
audio.play()
})
解決播放視頻不全屏
<!--
如何解決播放視頻不全屏？
1.ios7+支持自動播放
2.支持Airplay的設備（如：音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放視頻不全屏
webkit-playsinline="true"
-->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
手機拍照和上傳圖片
<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視頻 -->
<input type=file accept="video/*">
輸入時首字母默認大寫
<!-- 取消input在ios下，輸入的時候英文首字母的默認大寫 -->
<input autocapitalize="off" autocorrect="off" />
上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
關於 position:fixed 導致的bug
- ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
- android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
- ios4下不支持position:fixed
* 可用isroll.js，暫無完美方案
參考鏈接：
https://github.com/maxzhang/maxzhang.github.com/issues/2
http://www.cnblogs.com/PeunZhang/archive/2013/06/14/3117589.html
移動頁面二維碼ios有的時候不識別
給寫個盒子 隱藏個二維碼，裏面再放個二維碼 居中
把大盒子的二維碼opacity 爲0，裏面的二維碼是個圖片顯示，
ios上有時候長按會跑到別的地方
分享出去的頁面 想要個分享圖片
就直接在bod裏面寫個img標籤，寬高0
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
安卓手機點擊的時候 有藍色遮罩
-webkit-tap-highlight-color:rgba(0,0,0,0)
安卓的input number類型有上下箭頭
input::-webkit-outer-spin-button, 去掉input的value的上下箭頭
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
}
原文鏈接：http://www.qdfuns.com/notes/32547/fb74e4606a5a14148c82bb4856898d0d.html