入门客AI创业平台(我带你入门，你带我飞行)
博文笔记

h5各种问题解决方案。

创建时间：2017-06-02 投稿人： 浏览次数：862

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

（1）、HTML

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

（2）、CSS

//禁止用户 长按选择复制粘贴---css

-webkit-user-select: none;
-moz-user-select: none;
user-select:none;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

3、自动大写与自动修正

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

<input type="text" autocapitalize="off" autocorrect="off" />
  • 1
  • 1

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

<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  • 1
  • 1

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"/>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

-webkit-user-select: none;user-select: none;
  • 1
  • 1

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

-webkit-touch-callout: none;
  • 1
  • 1

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

-webkit-appearance: none;
  • 1
  • 1

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

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

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

img{display:block}；

img{float:left}；

img{vertical-align:top} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

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

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

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

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

<input type="text" autocapitalize="off" />
  • 1
  • 1

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

<input type="text" autocorrect="off" /> 
  • 1
  • 1

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

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

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那行注释掉，就会发现滚动得很慢。
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

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

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

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

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

22、form表单手机号校验？

<input class="tel" type="tel" placeholder="请输入您的员工编号" maxlength="12" onkeyup="this.value=this.value.replace(/D/g,"")" onafterpaste="this.value=this.value.replace(/D/g,"")">
  • 1
  • 1

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

            

                            

            
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
未上传头像

热门文章
h5各种问题解决方案。
js正则表达式深入
vue2路由异步加载（懒加载...
最新文章
js正则表达式深入
h5各种问题解决方案。
vue v-for详解
copyright © 2008-2019 入门客AI创业平台 版权所有 备案号：湘ICP备2023012770号