移動端 meta

控制顯示區(qū)域各種屬性:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
width - viewport的寬度

height – viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale – 允許用戶縮放到的最大比例
user-scalable – 用戶是否可以手動縮放

IOS中Safari允許全屏瀏覽:

<meta content="yes" name="apple-mobile-web-app-capable">
IOS中Safari頂端狀態(tài)條樣式:

<meta content="black" name="apple-mobile-web-app-status-bar-style">
忽略將數(shù)字變?yōu)殡娫捥柎a:

<meta content="telephone=no" name="format-detection">
一般情況下篮撑,IOS和Android系統(tǒng)都會默認某長度內(nèi)的數(shù)字為電話號碼,即使不加也是會默認顯示為電話的,so遵馆,取消這個很有必要卒茬!

IOS中Safari設置保存到桌面圖標:

這是IOS中Safari特有的meta心包,是在你保存某個頁面到桌面的時候使用這張圖作為桌面圖標锥惋,so屋群,尺寸和iphone上的一致畏梆,是57*57px

<link rel="apple-touch-icon" href="custom_icon.png">
// 手勢事件
touchstart //當手指接觸屏幕時觸發(fā)
touchmove //當已經(jīng)接觸屏幕的手指開始移動后觸發(fā)
touchend //當手指離開屏幕時觸發(fā)
touchcancel

// 觸摸事件
gesturestart //當兩個手指接觸屏幕時觸發(fā)
gesturechange //當兩個手指接觸屏幕后開始移動時觸發(fā)
gestureend

// 屏幕旋轉(zhuǎn)事件
onorientationchange

// 檢測觸摸屏幕的手指何時改變方向
orientationchange

// touch事件支持的相關(guān)屬性
touches
targetTouches
changedTouches
clientX    // X coordinate of touch relative to the viewport (excludes scroll offset)
clientY    // Y coordinate of touch relative to the viewport (excludes scroll offset)
screenX    // Relative to the screen
screenY    // Relative to the screen
pageX     // Relative to the full page (includes scrolling)
pageY     // Relative to the full page (includes scrolling)
target     // Node the touch event originated from
identifier   // An identifying number, unique to each touch event

  1. 屏幕旋轉(zhuǎn)事件:onorientationchange
    添加屏幕旋轉(zhuǎn)事件偵聽您宪,可隨時發(fā)現(xiàn)屏幕旋轉(zhuǎn)狀態(tài)(左旋、右旋還是沒旋)奠涌。例子:
    // 判斷屏幕是否旋轉(zhuǎn)
    function orientationChange() {
    switch(window.orientation) {
      case 0:
    alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
    break;
      case -90:
    alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
    break;
      case 90:
    alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
    break;
      case 180:
      alert("風景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
      break;
    };
    };
    // 添加事件監(jiān)聽
    addEventListener('load', function(){
    orientationChange();
    window.onorientationchange = orientationChange;
    });
  1. 隱藏地址欄 & 處理事件的時候宪巨,防止?jié)L動條出現(xiàn):
    // 隱藏地址欄 & 處理事件的時候 ,防止?jié)L動條出現(xiàn)
    addEventListener('load', function(){
    setTimeout(function(){ window.scrollTo(0, 1); }, 100);
    });
  1. 雙手指滑動事件:
    // 雙手指滑動事件
    addEventListener('load',  function(){ window.onmousewheel = twoFingerScroll;},
    false // 兼容各瀏覽器溜畅,表示在冒泡階段調(diào)用事件處理程序 (true 捕獲階段)
    );
    function twoFingerScroll(ev) {
    var delta =ev.wheelDelta/120; //對 delta 值進行判斷(比如正負) 捏卓,而后執(zhí)行相應操作
    return true;
    };
  1. 判斷是否為iPhone:
    // 判斷是否為 iPhone :
    function isAppleMobile() {
    return (navigator.platform.indexOf('iPad') != -1);
    };
  1. localStorage:
    例子 :(注意數(shù)據(jù)名稱 n 要用引號引起來)
    var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // 如果名稱是 n 的數(shù)據(jù)存在 ,則將其讀出 达皿,賦予變量 v 天吓。
    localStorage.setItem('n', v); // 寫入名稱為 n、值為 v 的數(shù)據(jù)
    localStorage.removeItem('n'); // 刪除名稱為 n 的數(shù)據(jù)
  1. 使用特殊鏈接:
    如果你關(guān)閉自動識別后 峦椰,又希望某些電話號碼能夠鏈接到 iPhone 的撥號功能 龄寞,那么可以通過這樣來聲明電話鏈接 ,
    <a href="tel:12345654321">打電話給我</a>
    <a href="sms:12345654321">發(fā)短信</a>
    或用于單元格:
    <td onclick="location.href='tel:122'">
  1. 自動大寫與自動修正
    要關(guān)閉這兩項功能,可以通過autocapitalize 與autocorrect 這兩個選項:
    <input type="text" autocapitalize="off" autocorrect="off" />
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末汤功,一起剝皮案震驚了整個濱河市物邑,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌滔金,老刑警劉巖色解,帶你破解...
    沈念sama閱讀 216,997評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異餐茵,居然都是意外死亡科阎,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評論 3 392
  • 文/潘曉璐 我一進店門忿族,熙熙樓的掌柜王于貴愁眉苦臉地迎上來锣笨,“玉大人蝌矛,你說我怎么就攤上這事〈碛ⅲ” “怎么了入撒?”我有些...
    開封第一講書人閱讀 163,359評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長椭岩。 經(jīng)常有香客問我茅逮,道長,這世上最難降的妖魔是什么判哥? 我笑而不...
    開封第一講書人閱讀 58,309評論 1 292
  • 正文 為了忘掉前任献雅,我火速辦了婚禮,結(jié)果婚禮上姨伟,老公的妹妹穿的比我還像新娘惩琉。我一直安慰自己豆励,他們只是感情好夺荒,可當我...
    茶點故事閱讀 67,346評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著良蒸,像睡著了一般技扼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上嫩痰,一...
    開封第一講書人閱讀 51,258評論 1 300
  • 那天剿吻,我揣著相機與錄音,去河邊找鬼串纺。 笑死丽旅,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的纺棺。 我是一名探鬼主播榄笙,決...
    沈念sama閱讀 40,122評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼祷蝌!你這毒婦竟也來了茅撞?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,970評論 0 275
  • 序言:老撾萬榮一對情侶失蹤巨朦,失蹤者是張志新(化名)和其女友劉穎米丘,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體糊啡,經(jīng)...
    沈念sama閱讀 45,403評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡拄查,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,596評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了棚蓄。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片堕扶。...
    茶點故事閱讀 39,769評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡腺毫,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出挣柬,到底是詐尸還是另有隱情潮酒,我是刑警寧澤,帶...
    沈念sama閱讀 35,464評論 5 344
  • 正文 年R本政府宣布邪蛔,位于F島的核電站急黎,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏侧到。R本人自食惡果不足惜勃教,卻給世界環(huán)境...
    茶點故事閱讀 41,075評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望匠抗。 院中可真熱鬧故源,春花似錦、人聲如沸汞贸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽矢腻。三九已至门驾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間多柑,已是汗流浹背奶是。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留竣灌,地道東北人聂沙。 一個月前我還...
    沈念sama閱讀 47,831評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像初嘹,于是被迫代替她去往敵國和親及汉。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,678評論 2 354

推薦閱讀更多精彩內(nèi)容