iPad web APP 開發相關

時間 2019-11-11

標籤 ipad web app 開發相關欄目 iPad 简体版

原文原文鏈接

一、移除 browser chrome，全屏啓動

要先保存到主屏幕，而後從點擊主屏幕進入。。

二、停留在web APP裏面

當在web APP裏面點擊連接的時候，APP會當即關閉而後使用瀏覽器打開連接（web APP不等同於Safari）

解決方法一、轉換成單頁面APP，用fragment links 或 AJAX callbacks來作連接

或者綁定click事件，取消瀏覽器默認行爲

三、提示人們能夠把web APP添加到主屏幕，參考Iscroll做者的插件 http://cubiq.org/add-to-home-screen

四、裝飾icon，添加到桌面：

前三個是用於開始icon，設備會自動選擇相對應的尺寸

這四個設定web APP的開始圖片，前三個用於豎屏狀態下的iPhone，有retain屏幕的iPhone，iPad，第四條用於橫屏的iPad， size不可缺乏否則圖片會被無視掉

五、保持顯示內容不被縮放當屏幕方向改變時

按照橫屏模式思考，而後轉化爲豎屏模式

還須要保證字體不會被縮放，下面的腳本實現

* This bit of code disables user scaling on iOS until the user tries to scale with pinch/zoom.

* http://stackoverflow.com/questions/2557801/how-do-i-reset-the-scale-zoom-of-a-web-app-on-an-orientation-change-on-the-iphon

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {

var viewportmeta = document.querySelector('meta[name="viewport"]');

if (viewportmeta) {

viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';

document.addEventListener('gesturestart', function () {

viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=10';

}, false);

}

</script>

六、輸入數字時彈出只容許數字輸入鍵盤

pattern的用法都同樣，這裏再也不囉嗦各類詳細寫法了，只是列出來一些經常使用的正則就行了：

信用卡 [0-9]{13,16}

銀聯卡 ^62[0-5]\d{13,16}$

Visa: ^4[0-9]{12}(?:[0-9]{3})?$

萬事達：^5[1-5][0-9]{14}$

QQ號碼： [1-9][0-9]{4,14}

手機號碼：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$

身份證：^([0-9]){7,18}(x|X)?$

密碼：^[a-zA-Z]\w{5,17}$ 字母開頭，長度在6~18之間，只能包含字母、數字和下劃線

強密碼：^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$ 包含大小寫字母和數字的組合，不能使用特殊字符，長度在8-10之間

7個漢字或14個字符：^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$

相關標籤/搜索

每日一句

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