移动端或者移动端h5需要注意的一些事

Posted lgnblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端或者移动端h5需要注意的一些事相关的知识,希望对你有一定的参考价值。

 

1、移动端点击a标签出现的背景色

技术图片
 a,
a:hover,
a:active,
a:visited,
a:link,
a:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
 
技术图片

2、对于超出div范围的内容进行省略号(...)显示

  2.1、单行显示

技术图片
div{
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap  
}
技术图片

技术图片

  2.2、多行显示

技术图片
div{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;  
    -webkit-line-clamp: 2;//可以输入你想要的行数
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
技术图片

技术图片

   2.3、正常情况下是没有问题的,但是如果你对你的代码进行webpack打包,可能就会出现打包后-webkit-box-orient: vertical;消失了,这个时候就需要这样实施了:

 /* autoprefixer: off */
    -webkit-box-orient: vertical;
  /* autoprefixer: on */

 如果你使用的是webpack自带的打包配置,则需要注释掉webpack.prod.conf.js中的如下插件

  new OptimizeCSSPlugin({
     cssProcessorOptions: config.build.productionSourceMap
         ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),

并且在util.js中的如下部分加入minimize:true

技术图片
const cssLoader = {
    loader: ‘css-loader‘,
    options: {
      sourceMap: options.sourceMap,
      minimize: true
    }
  }
技术图片

这样在生产环境中打包的css也会压缩,并且使那个样式消失。

3、百度禁止转码

通过百度打开网页时,百度可能会对你的网站进行转码,往你页面上添加广告之类的,我们可以通过meta标签来禁止它:

<meta http-equiv="Cache-Control" content="no-siteapp" />

 

4、设置状态栏的背景颜色(ios

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

 

content参数:

  • default: 状态栏背景是白色
  • black:状态栏背景是黑色
  • black-translucent:状态栏背景是半透明。如果设置为default或者black,网页内容从状态栏底部开始。如果设置为black-translucent,网页内容充满整个屏幕,顶部会被状态栏遮挡。

5、h5页面窗口自动调整到设备宽度,并且禁止缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  • width:设置viewport的宽度,为一个正整数,或者一个字符串‘device-width’
  • height:设置窗口高度,一般设置了宽度,会自动解析出高度,可以不用设置
  • initial-scale:默认缩放比例,为一个数字,可以带小数
  • minimum-scale:允许用户最小缩放比例,为一个数字,可以带小数
  • maximum-scale:允许用户最大缩放比例,为一个数字,可以带小数
  • user-scalable:是否允许手动缩放

6、可隐藏地址栏(IOS)

<meta name="apple-mobile-web-app-capable" content="yes" />

 

7、移动端手机号码识别(IOS)

在IOS Safari上会对那些看起来像是电话号码的数字处理为电话链接,我们可以通过meta来关闭对电话号码的自动识别:

<meta name="format-detection" content="telephone=no" />

 

在页面中标签实现打电话

<a href="tel:0755-10086">打电话给:0755-10086</a>

 

发短信

<a href="sms:123456">123456</a> 

 

8、移动端邮箱识别(android)

在安卓上会对符合邮箱格式的字符串进行识别,我们可以通过如下meta来管理邮箱的自动识别:

<meta content="email=no" name="format-detection" /> 

邮件的实现方法:

//1.普通邮件
<a href="mailto:826248794qq.com">点击我发邮件</a>
//2.收件地址后添加?cc=开头,可添加抄送地址(Android存在兼容问题)
<a href="mailto:826248794@qq.com?cc=zengfp@yeah.net">点击我发邮件</a>

 

9、优先使用最新版本IE和Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

 

10、表单输入框上的placeholder的颜色值得改变

input::-webkit-input-placeholder{color:#ff1234;}
input:focus::-webkit-input-placeholder{color:#ff1234}

 

11、禁止文本缩放

当移动设备横竖屏切换时,文本的大小会重新计算,进行相应的缩放,如果你不需要这样,可以选择禁止。在pc端该属性已经被移除,若该属性要在移动端生效,必须设置meta viewport

html {
          -webkit-text-size-adjust: 100%;
}

 

12、移动端禁止选中内容

div{
    -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all (移动端不需要) */
  -ms-user-select: none;      /* IE 10+ */ 
}

 

13、禁止保存或者拷贝图片(IOS)。当在手机上长按图片img,会弹出选项保存图片或者拷贝图片,如果你不想用户这样操作,你可以设置以下样式禁止

img { -webkit-touch-callout: none; }

 

14、audio元素和video元素在ios和android中无法自动播放。我们可以设置触屏即播

$(‘html‘).one(‘touchstart‘,function(){
    audio.play()
})

 

15、手机拍照和上传图片的<input type="file" />的accept属性

<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">

 

16、消除transition闪屏

技术图片
div{
    /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
    -webkit-transform-style: preserve-3d;
    /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
    -webkit-backface-visibility: hidden;
}
技术图片

 

17、开启硬件加速,解决页面闪白,保证动画流畅

技术图片
div{
    -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
}
技术图片

 

18、关闭IOS键盘首字母自动大写。

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

 

19、解决字体在移动端比例缩小后出现锯齿的问题

-webkit-font-smoothing: antialiased;

以上是关于移动端或者移动端h5需要注意的一些事的主要内容,如果未能解决你的问题,请参考以下文章

移动端H5的一些基本知识点总结

移动端H5的一些基本知识点总结

移动端H5页面注意事项

h5移动端阻止浏览器长按事件

混合开发之H5在移动端如何调试界面

移动端H5网页开发必备知识