移动webapp开发小贴士

2018-07-11 12:13:00 3201 4 编辑: 来源:互联网

移动端开发常用的一些属性
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 />

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通