移动webapp开发小贴士

28812018-07-11編輯：來源：互联网在線PDF預覽

移动端开发常用的一些属性
1 创建主屏幕图标（Creating a home screen icon ，for ios）
//57*57
<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

深正互联

2 文件上传, 从相机捕获媒体
<input type="file" accept = "image/*; capture=camera" />
<input type="file" accept = "video/*; capture=camcorder" />
<input type="file" accept = "audio/*; capture=microphone" />

3 全屏（Making it full-screen， for ios）– 更像本地App
<meta name="apple-mobile-web-app-capable" content="yes" />

4 改变状态栏（Changing the phone status bar, for ios）
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

5 阻止缩放（Preventing scaling）
<meta name="viewport" content="user-scalable=no, width=device-width" />

6 阻止弹性滚动（Preventing elastic scrolling）
<script>
    function BlockMove(event) {
        //Tell Safari not to move the window.
        event.preventDefault();
    }
</script>
<body ontouchmove="BlockMove(event);" > ...</body>

7 禁用手机号码链接（for ios）
<meta name="format-detection" content="telephone=no" />

8 阻止旋转屏幕时自动调整字体大小
-webkit-text-size-adjust:none;

9 IOS中禁止用户选中文字
-webkit-user-select:none;

10 iOS中如何禁止用户保存图片复制图片
-webkit-touch-calloutt:none;

11 语音输入
<input type="text" x-webkit-speech />

文章引用：https://www.hkhulian.com/infos/1405.html
本文之圖文訊息香港網頁設計，香港App開發公司——香港互聯摘自互聯網，如有版權糾紛或違規，請聯繫我們刪除，谢谢。

返回列表