移动web开发小贴示

阻止弹性滚动

<script>
functionBlockMove(event){

//Tell Safari not to move the window.
event.preventDefault();

}
</script>
<body ontouchmove=”BlockMove(event);”>

</body>

检测屏幕是否旋转

···//Detect whether device supports orientationchange event, otherwise fall back to
//the resize event.
varsupportsOrientationChange="onorientationchange"inwindow,
    orientationEvent=supportsOrientationChange?"orientationchange":"resize";
window.addEventListener(orientationEvent,function(){
    alert('HOLY ROTATING SCREENS BATMAN:'+window.orientation+" "+screen.width);
},false);···

禁止webapp跳转到safari(for ios)

indow.navigator.standalone){

        // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
    varnoddy,
        remotes=false;
    document.addEventListener('click',function(event){
        noddy=event.target;
        //Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
        while(noddy.nodeName!=="A"&&noddy.nodeName!=="HTML"){
            noddy=noddy.parentNode;
        }
        if('href'innoddy&&noddy.href.indexOf('http')!==-1&&(noddy.href.indexOf(document.location.host)!==-1||remotes)){
            event.preventDefault();
            document.location.href=noddy.href;
        }
    },false);
}

阻止旋转屏幕时自动调整字体大小

-webkit-text-size-adjust:none;

IOS中禁止用户选中文字

-webkit-user-select:none;

iOS中如何禁止用户保存图片 复制图片

-webkit-touch-calloutt:none;

语音输入

<input type="text"x-webkit-speech />

文件上传, 从相机捕获媒体

<input type="file"accept="image/*; capture=camera" />
<input type="file"accept="video/*; capture=camcorder" />
<input type="file"accept="audio/*; capture=microphone" />



  兼容安卓微信调用摄像头
 <input type="file" name="file"  capture="camera">
兼容安卓默认选择sd卡上的相册图片
 <input type="file" name="file" accept="image/*" >
 

发送短信给多个人

<a href="sms:18888886666,18888885555"> 发送短信给多个人
    

备注:transparent的属性值在android下无效。

1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。

2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影。

3、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式),但是在android下不可乱用,很多见所未见的bug就是因为这个。

4、@-webkit-keyframes可以预定义很多你所想到的动画,然后通过-webkit-transition来调用。

5、-webkit-background-size可以做高清图标,不过一些低版本的android只能识别background-size,所以有必要两个都要写上;用这个属性的时候推荐树勇cover这个值,可以自动去匹配宽和高。

6、text-shadow多用这个属性,可以美化文字效果。

7、border-radius、box-shadow、gradient、border-image,不解释,可以精简代码。

8、android、ios4及以下,固定宽/高块级元素的overflow:scroll/auto失效,属于浏览器的bug,可借助第三方工具实现。

9、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。

10、<meta name=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width”>width可是宽度,initial-scale初始化缩放比例,maximum-scale允许用户缩放的最大比例,minimum-scale允许用户缩放的最小比例,user-scalable是否允许用户缩放。

11、允许用户添加到主屏幕,并提供webapp的支持。

12、css3动画会影响你的自动聚焦,所以自动聚焦要在动画执行之前来做,或者直接舍弃。

13、使用media query适配不同屏幕。

14、如果涉及较多域外链接,DNS Prefetching可以帮你做DNS预解析。

15、如果你希望你的站点更多地在SNS上传播,那么Open Graph Protocol会比较适合你。

16、当用iScroll时候,不能使用:focus{outline:0}伪类,否则滑动会卡。

持续更新,希望关注点赞。

    原文作者:zeyu
    原文地址: https://segmentfault.com/a/1190000015907611
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞