H5 项目实用

朴灿烈づ我的快乐病毒、 2022-09-24 01:28 208阅读 0赞

**1、H5表单禁止复制、粘贴的方法**

（1）、HTML

//禁止复制：
    <input type=text value="fdg" size=50 onselectstart="return false">
    
    //禁止粘贴：
    <input type=text value="fdg" size=50  onpaste="return false">

（2）、CSS

//禁止用户 长按选择复制粘贴---css
    
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select:none;

--------------------

**2、特殊链接（电话、发短信、发邮件）**

如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接 ,

// 一、打电话
    <a href="tel:12345654321">打电话给我</a>
     // 二、发短信，winphone系统无效
    <a href="sms:12345654321">发短信</a>
    
    或用于单元格：<td onclick="location.href='tel:122'">
    
    三、写邮件
     //注：在添加这些功能时，第一个功能以"?"开头，后面的以"&"开头
     //1.普通邮件
    <a href="mailto:863139978@qq.com">点击我发邮件</a>
     //2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）
    <a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">点击我发邮件</a>
     //3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）
    <a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">点击我发邮件</a>
    
     //4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址
    <a href="mailto:863139978@qq.com;384900096@qq.com">点击我发邮件</a>
     //5.包含主题，用?subject=
    <a href="mailto:863139978@qq.com?subject=邮件主题">点击我发邮件</a>
     //6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行 
    <a href="mailto:863139978@qq.com?body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件</a>
     //7.内容包含链接，含http(s)://等的文本自动转化为链接
    <a href="mailto:863139978@qq.com?body=http://www.baidu.com">点击我发邮件</a>
     //8.内容包含图片（PC不支持）
    <a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">点击我发邮件</a>
    
     //9.完整示例
    <a href="mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">点击我发邮件</a>

--------------------

**3、自动大写与自动修正**

要关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项：

--------------------

**4、H5页面在移动端无法满屏自适应窗口，怎么办？**

--------------------

**5、H5页面在移动端字体应该怎么设置？**

1．iOS 系统

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

无微软雅黑字体

2.Android 系统

默认中文字体是Droidsansfallback

默认英文和数字字体是Droid Sans

无微软雅黑字体

3.Winphone 系统

默认中文字体是Dengxian(方正等线体)

默认英文和数字字体是Segoe

无微软雅黑字体

各个手机系统有自己的默认字体，且都不支持微软雅黑，如无特殊需求，手机端无需定义中文字体，使用系统默认英文字体和数字字体可使用 Helvetica ，三种系统都支持。

font-family:Helvetica;

**移动端如何定义字体font-family**

@ ————————————–中文字体的英文名称  
@ 宋体 SimSun  
@ 黑体 SimHei  
@ 微信雅黑 Microsoft Yahei  
@ 微软正黑体 Microsoft JhengHei  
@ 新宋体 NSimSun  
@ 新细明体 MingLiU  
@ 细明体 MingLiU  
@ 标楷体 DFKai-SB  
@ 仿宋 FangSong  
@ 楷体 KaiTi  
@ 仿宋\_GB2312 FangSong\_GB2312  
@ 楷体\_GB2312 KaiTi\_GB2312  
@  
@ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica

body \{ font-family: Microsoft Yahei,SimSun,Helvetica; \}

--------------------

**6、不想识别电话号码、邮箱，怎么办？**

//H5页面的数字不想识别为电话号码，怎么办？
    <meta name="format-detection"content="telephone=no" />
    
    //H5页面想忽略Android平台中对邮箱地址的识别，怎么办？
    <meta name="format-detection" content="email=no"/>

--------------------

**7、不想显示webkit的滚动条，怎么办？**

element::-webkit-scrollbar{ display: none;}

--------------------

**8、H5页面的内容想不被人选中，怎么办？**

-webkit-user-select: none;user-select: none;

--------------------

**9、H5页面想禁止长按链接或长按图片后弹出菜单，怎么办？**

-webkit-touch-callout: none;

--------------------

**10、取消IOS里Button、Input上的默认样式？**

-webkit-appearance: none;

--------------------

**11、想在Android里H5页面touch时没有蓝色的边框与遮罩，怎么办？**

-webkit-tap-highlight-color:rgba(0,0,0,0);

--------------------

**12、多张图片放置在一起，不想有4像素的空隙，怎么办？**

img{ display:block}；
    
    img{ float:left}；
    
    img{ vertical-align:top}

--------------------

**13、想改变Input里 placeholder属性的样式，怎么办？**

::-webkit-input-placeholder{
       color:#ccc}

--------------------

**14、H5页面input type=”num”时想去掉右边的上下箭头，怎么办？**

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none !important; margin: 0;}

--------------------

**15、H5页面加载的图片太大了，怎么办？**

JPG图片用JPEGmini压缩，PNG可在线用http://tinypng.org/压缩

--------------------

**16、在iOS系统中键盘输入时不想首字母为大写，怎么办？**

--------------------

**17、在IOS系统中键盘输入关闭自动修正，怎么办？**

--------------------

**18、屏幕旋转横屏竖屏切换时，想禁止文本缩放，怎么办？**

-webkit-text-size-adjust: 100%;

--------------------

**19、H5页面想有快速回弹滚动的效果，怎么办？**

overflow: auto; /* auto | scroll */
    
    -webkit-overflow-scrolling: touch; #container { width: 300px; height: 50%; text-align: center; margin: 0 auto; -webkit-box-sizing: border-box; background-color: cyan; position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; /*liuhx:可以把这整行注释掉对比差别 */ } //加上 -webkit-overflow-scrolling: touch; 可以用手指滑动中间的蓝色区域，会发现回弹效果以及滚动得很快： //如果把-webkit-overflow-scrolling那行注释掉，就会发现滚动得很慢。

--------------------

**20、在Android 上想不显示语音输入按钮，怎么办？**

input::-webkit-input-speech-button {
       display: none}

--------------------

**21、想开发H5摇一摇功能，怎么办？**

HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

--------------------

**22、form表单手机号校验？**

--------------------

**23、点击元素产生背景或边框怎么去掉？**

//ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；
    
    //android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果；
    
    //winphone系统,点击标签产生的灰色半透明背景，能通过设置<meta name="msapplication-tap-highlight" content="no">去掉；
    
    //特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签
    a,button,input,textarea { 
        -webkit-tap-highlight-color: rgba(0,0,0,0); 
        -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
    }   
    
    // 也可以 
    * { -webkit-tap-highlight-color: rgba(0,0,0,0); }
    * 
    //winphone下
    <meta name="msapplication-tap-highlight" content="no">

--------------------

**24、H5地理定位–navigator.geolocation**

--------------------

**25、缓存**

<html manifest="demo_html.appcache">
    
    /* 注意，采用 manifest 进行缓存，所以建议，缓存的时候，悠着点，如果操作不当，很危险，如果必须要用的的话，想更新缓存的时候，只能更改 demo_html.appcache 文件了！ */

--------------------

**26、Web Workers（运行在页面后台的javascripe，不影响页面的性能，可以算是 JS 异步执行）**

--------------------

**27、美化表单元素**

//一、使用appearance改变webkit浏览器的默认外观
    input,select { -webkit-appearance:none; appearance: none; }
    
    
    //二、winphone下，使用伪元素改变表单元素默认外观
    //1.禁用select默认箭头，::-ms-expand修改表单控件下拉箭头，设置隐藏并使用背景图片来修饰
    select::-ms-expand { display:none; }
    
    //2.禁用radio和checkbox默认样式，::-ms-check修改表单复选框或单选框默认图标，设置隐藏并使用背景图片来修饰
    input[type=radio]::-ms-check,
    input[type=checkbox]::-ms-check { display:none; }
    
    //3.禁用pc端表单输入框默认清除按钮，::-ms-clear修改清除按钮，设置隐藏并使用背景图片来修饰
    input[type=text]::-ms-clear,
    input[type=tel]::-ms-clear,
    input[type=number]::-ms-clear { display:none; }

--------------------

**28、移动端字体单位font-size选择px还是rem**

// 如需适配多种移动设备，建议使用rem。以下为参考值：
    
    html { font-size: 62.5%; }   //10/16 = 62.5%
    
    //设置12px字体 这里注意在rem前要加上对应的px值，解决不支持rem的浏览器的兼容问题，做到优雅降级
    body { font-size:12px; font-size:1.2rem; }

**29、项目超实用的CSS样式**

//去掉webkit的滚动条——display: none;
    //其他参数
    ::-webkit-scrollba //滚动条整体部分
    ::-webkit-scrollbar-thumb   //滚动条内的小方块
    ::-webkit-scrollbar-track   //滚动条轨道
    ::-webkit-scrollbar-button  //滚动条轨道两端按钮
    ::-webkit-scrollbar-track-piece  //滚动条中间部分，内置轨道
    ::-webkit-scrollbar-corner       //边角，两个滚动条交汇处
    ::-webkit-resizer            //两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
    
    
    // 禁止长按链接与图片弹出菜单
    a,img { -webkit-touch-callout: none }    
    
    
    // 禁止ios和android用户选中文字
    html,body {-webkit-user-select:none; user-select: none; }
    
    
    // 改变输入框placeholder的颜色值
    ::-webkit-input-placeholder { /* WebKit browsers */
    color: #999; }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #999; }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #999; }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #999; }
    input:focus::-webkit-input-placeholder{ color:#999; }
    
    
    // android上去掉语音输入按钮
    input::-webkit-input-speech-button {display: none}
    
    
    // 阻止windows Phone的默认触摸事件
    /*说明：winphone下默认触摸事件事件使用e.preventDefault是无效的，可通过样式来禁用，如：*/
    html { -ms-touch-action:none; } //禁止winphone默认触摸事件
    
    
    // 阻止windows Phone的默认触摸事件
    /*说明：winphone下默认触摸事件事件使用e.preventDefault是无效的，可通过样式来禁用，如：*/
    html { -ms-touch-action:none; } //禁止winphone默认触摸事件

--------------------

**30、手机拍照和上传图片**

//IOS有拍照、录像、选取本地图片功能，部分Android只有选择本地图片功能。Winphone不支持
    <input type="file" accept="images/*" />
    <input type="file" accept="video/*" />

--------------------

**31、屏幕旋转的事件和样式**

//JS处理
    function orientInit(){ 
        var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
        if(orientChk =='lapdscape'){
            //这里是横屏下需要执行的事件
        }else{
            //这里是竖屏下需要执行的事件
        }
    }
    
    orientInit();
    window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){ 
        setTimeout(orientInit, 100);
    },false)    
    
    //CSS处理
    //竖屏时样式
    @media all and (orientation:portrait){   }
    //横屏时样式
    @media all and (orientation:landscape){   }

--------------------

**32、audio元素和video元素在ios和andriod中无法自动播放**

//音频，写法一
    <audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>
    
    //音频，写法二
    <audio controls="controls"> 
        <source src="music/bg.ogg" type="audio/ogg"></source>
        <source src="music/bg.mp3" type="audio/mpeg"></source>
        优先播放音乐bg.ogg，不支持在播放bg.mp3
    </audio>
    
    //JS绑定自动播放（操作window时，播放音乐）
    $(window).one('touchstart', function(){ 
        music.play();
    })
    
    //微信下兼容处理
    document.addEventListener("WeixinJSBridgeReady", function () { 
        music.play();
    }, false);
    
    //小结
    //1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常
    //2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间

--------------------

**33、重力感应事件**

// 运用HTML5的deviceMotion，调用重力感应事件
    if(window.DeviceMotionEvent){
        document.addEventListener('devicemotion', deviceMotionHandler, false)
    }   
    
    var speed = 30;
    var x = y = z = lastX = lastY = lastZ = 0;
    function deviceMotionHandler(eventData){ 
        var acceleration = event.accelerationIncludingGravity;
        x = acceleration.x;
        y = acceleration.y; 
        z = acceleration.z;
        if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){
            //这里是摇动后要执行的方法 
            yaoAfter();
        }
        lastX = x;
        lastY = y;
        lastZ = z;
    }
    
    function yaoAfter(){ 
        //do something
    }
    
    //说明：说见案例摇一摇效果中yao.js

--------------------

**34、微信浏览器用户调整字体大小后页面矬了，怎么阻止用户调整**

//以下代码可使Android机页面不再受用户字体缩放强制改变大小，但是会有1S左右延时，期间可以考虑loading来处理
    if (typeof(WeixinJSBridge) == "undefined") {
        document.addEventListener("WeixinJSBridgeReady", function (e) { 
            setTimeout(function(){ 
                WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){ 
                    alert(JSON.stringify(res));
                })
            }, 0)
        });
    }else{  
        setTimeout(function(){ 
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){ 
                alert(JSON.stringify(res));
            })
        }, 0)   
    }
    
    //IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小
    body { -webkit-text-size-adjust:100%!important; }
    
    //最好的解决方案：最好使用rem或百分比布局

--------------------

**35、定位的坑**

//fixed定位
    //1.ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
    //2.android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
    //3.ios4下不支持position:fixed
    //解决方案：使用[Iscroll](http://cubiq.org/iscroll-5)，如：
    <div id="wrapper">
            <ul>
                   <li></li>
                   .....
            </ul>
    </div>
    <script src="iscroll.js"></script>
    <script>
        var myscroll;
        function loaded(){ 
            myscroll=new iScroll("wrapper");
        }
        window.addEventListener("DOMContentLoaded",loaded,false);
    </script>
    
    
    
    
    //position定位
    //Android下弹出软键盘弹出时，影响absolute元素定位
    //解决方案:
    var ua = navigator.userAgent.indexOf('Android');
    if(ua>-1){
        $('.ipt').on('focus', function(){ 
            $('.css').css({
       'visibility':'hidden'})
        }).on('blur', function(){ 
            $('.css').css({
       'visibility':'visible'})
        })
    }

--------------------

**36、播放视频不全屏**

<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

--------------------

**37、JS判断设备**

--------------------

**38、JS判断微信浏览器**

--------------------

**39、android bug**

（a）android 2.3 bug

//1.@-webkit-keyframes 需要以0%开始100%结束，0%的百分号不能去掉
    //2.after和before伪类无法使用动画animation
    //3.border-radius不支持%单位，如要兼容，可以给radius设置一下较大的值
    //4.translate百分比的写法和scale在一起会导致失效，例如：
    -webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

（b）android 4.x bug

//1.三星 Galaxy S4中自带浏览器不支持border-radius缩写
    //2.同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分
    //3.部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色
    //4.android无法同时播放多音频audio

--------------------

**40、消除transition闪屏**

.css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }

--------------------

**41、开启硬件加速**

//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，当检测到某个DOM元素应用了某些CSS规则时就会自动开启，从而解决页面闪白，保证动画流畅。
    .css {
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

--------------------

**42、渲染优化**

//1.禁止使用iframe（阻塞父文档onload事件）
    //2.禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）
    //使用CSS3代码代替JS动画；
    //开启GPU加速；
    //使用base64位编码图片(不小图而言，大图不建议使用)
        // 对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU。小图标优势在于：
        //1.减少HTTP请求；
        //2.避免文件跨域；
        //3.修改及时生效；

--------------------

**43、js判断类型：**

在 JavaScript 中，判断一个变量的类型尝尝会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 “object”。这就需要用到instanceof来检测某个对象是不是另一个对象的实例。

--------------------

详情：[http://sanwen8.cn/p/11fAOOp.html][http_sanwen8.cn_p_11fAOOp.html]

[http_sanwen8.cn_p_11fAOOp.html]: http://sanwen8.cn/p/11fAOOp.html