资讯专栏INFORMATION COLUMN

移动web开发小贴示

snowLu / 2550人阅读

摘要:可以通过来自动隐藏浏览器地址栏。可是宽度,初始化缩放比例,允许用户缩放的最大比例,允许用户缩放的最小比例,是否允许用户缩放。允许用户添加到主屏幕,并提供的支持。当用时候,不能使用伪类,否则滑动会卡。

阻止弹性滚动



...

检测屏幕是否旋转
···//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;
语音输入

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






  兼容安卓微信调用摄像头
 
兼容安卓默认选择sd卡上的相册图片
 
 
发送短信给多个人
 发送短信给多个人
    
备注: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、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}伪类,否则滑动会卡。 持续更新,希望关注点赞。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113642.html

相关文章

  • 移动web开发贴示

    摘要:可以通过来自动隐藏浏览器地址栏。可是宽度,初始化缩放比例,允许用户缩放的最大比例,允许用户缩放的最小比例,是否允许用户缩放。允许用户添加到主屏幕,并提供的支持。当用时候,不能使用伪类,否则滑动会卡。 阻止弹性滚动 functionBlockMove(event){ //Tell Safari not to move the window. event.preventDefault();...

    CoderDock 评论0 收藏0
  • React.js 小书 Lesson25 - 实战分析:评论功能(四)

    摘要:接下来是实战环节,我们会继续上一阶段的例子,把评论功能做得更加复杂一点。把已经发布的评论持久化,存放到浏览器的中。评论显示发布日期,如秒前,分钟前,并且会每隔秒更新发布日期。事件监听方法,。下一节中我们将介绍小书实战分析评论功能五。 React.js 小书 Lesson25 - 实战分析:评论功能(四) 本文作者:胡子大哈本文原文:http://huziketang.com/book...

    mozillazg 评论0 收藏0
  • 移动 Web 开发的10个优秀 JavaScript 框架

    摘要:是移动开发人员的首选框架之一。这个框架用于开发跨平台的移动应用,例如,黑莓,和等多个移动操作系统。是一个用于现代的和移动应用程序的全面的框架。是一个插件,可以搭配或工作,并配备了流畅的动画,导航和移动浏览器的主题如,安卓,黑莓和。 选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务。开发人员可以使用框架实现的功能高效地...

    CocoaChina 评论0 收藏0

发表评论

0条评论

snowLu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<