推广 热搜: 行业  设备  机械    系统  教师    参数  经纪  蒸汽 

移动端或者移动端h5需要注意的一些事移动手机号邮箱「移动端或者移动端h5需要注意的一些事」

   日期:2025-02-22     移动:http://sjzytwl.xhstdz.com/mobile/quote/88981.html

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

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

  2.1、单行显示

  2.2、多行显示

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

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

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

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

3、百度禁止转码

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

 

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

 

content参数:

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

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

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

6、可隐藏地址栏(IOS)

 

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

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

 

在页面中标签实现打电话

 

发短信

 

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

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

邮件的实现方法:

 

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

 

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

 

11、禁止文本缩放

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

 

12、移动端禁止选中内容

 

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

 

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

 

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

 

16、消除transition闪屏

 

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

 

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

 

本文地址:http://sjzytwl.xhstdz.com/quote/88981.html    物流园资讯网 http://sjzytwl.xhstdz.com/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


0相关评论
相关最新动态
推荐最新动态
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号