移动web开发小贴示

CoderDock 发布于2019-08-02 11:09 / 2805人阅读

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

阻止弹性滚动

...

检测屏幕是否旋转

···//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}伪类，否则滑动会卡。 持续更新，希望关注点赞。

GPU云服务器云服务器小贴示移动web开发 web移动端开发 HTML5移动Web开发指南

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

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

移动web开发小贴示

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

snowLu 2019-08-29 16:16 评论0 收藏0
React.js 小书 Lesson25 - 实战分析：评论功能（四）

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

mozillazg 2019-08-21 17:33 评论0 收藏0
移动 Web 开发的10个优秀 JavaScript 框架

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

CocoaChina 2019-08-21 12:06 评论0 收藏0