博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动开发小技巧
阅读量:5081 次
发布时间:2019-06-12

本文共 1857 字,大约阅读时间需要 6 分钟。

1、页面meta之viewport

width可是宽度,initial-scale初始化缩放比例 maximum-scale允许用户缩放的最大比例 minimum-scale允许用户缩放的最小比例 user-scalable是否允许用户缩放

2、关闭iOS键盘首字母自动大写

    IOS的机子,默认英文输入法状态下,首字母是自动大写的,有时候挺烦人的,  如果想关闭自动大写可以通过autocapitalize属性实现:

 

3、关闭iOS输入自动修正

  如果不需要的话,可以这样:

 

4、禁止文本缩放

  当移动设备横竖屏切换时,文本的大小会重新计算,进行相应的缩放,当我们不需要这种情况时,可以选择禁止:

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

 

5、移动端如何清除输入框内阴影

  在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:

input,textarea {
border: 0; /* 方法1 */ -webkit-appearance: none; /* 方法2 */}

 

6、邮箱地址识别

  关闭邮箱地址识别:

关闭邮箱地址识别:
开启邮件发送:dooyoe@gmail.com

 

7、移动端手机号码识别

  在 iOS Safari (其他浏览器和Android均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如:

    * 7位数字,形如:1234567
    * 带括号及加号的数字,形如:(+86)123456789
    * 双连接线的数字,形如:00-00-00111
    * 11位数字,形如:13800138000

1. 关闭电话识别:
2. 开启电话功能:1234563. 开启短信功能:123456

 

8、快速回弹滚动

    我们先来看看回弹滚动在手机浏览器发展的历史:

    * 早期的时候,移动端的浏览器都不支持非body元素的滚动条,所以一般都借助 iScroll;
    * Android 3.0/iOS解决了非body元素的滚动问题,但滚动条不可见,同时iOS上只能通过2个手指进行滚动;
    * Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果,不过随后这个特性又被移除;
    * iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果
    在iOS上如果你想让一个元素拥有像 Native 的滚动效果,你可以这样做:

.xxx {
overflow: auto; /* auto | scroll */ -webkit-overflow-scrolling: touch;}

    PS:iScroll用过之后感觉不是很好,有一些诡异的bug,这里推荐另外一个 iDangero Swiper,这个插件集成了滑屏滚动的强大功能(支持3D),而且还有回弹滚动的内置滚动条,官方地址:

    http://www.idangero.us/sliders/swiper/index.php

 

9、移动端禁止选中内容

  如果你不想用户可以选中页面中的内容,那么你可以在css中禁掉:

div {
-webkit-user-select: none;}

 

10、移动端取消touch高亮效果

    在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来禁止:

.xxx {
-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios点击元素时出现的阴影。}

 

11、如何禁止保存或拷贝图像

  通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:

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

 

12、动画加速

  -webkit-transform:translate3d(0, 0, 0)

  在ios下可以让动画更加流畅(这个属性会调用硬件加速模式),但是在android下不可乱用,会产生很多见所未见的bug。

 

转载于:https://www.cnblogs.com/rsky/p/4895596.html

你可能感兴趣的文章
bootstrap相关使用案例
查看>>
排序算法之三冒泡排序
查看>>
Linux下tomcat的catalina.out屏蔽
查看>>
django rest_framework中的mixins,generics,ModelViewSet中的url简写
查看>>
Operating System-Kickoff:什么是操作系统&&操作系统的核心概念
查看>>
hdu 2923 Einbahnstrasse
查看>>
JS deBug 技巧
查看>>
第十八章 3string型字符串的赋值
查看>>
HTML5新手入门基础知识要点概要
查看>>
caffe学习记录(三) Blob,layer Net, solver配置文件的编写
查看>>
删除sql数据库日志的方法
查看>>
笨功夫(转)
查看>>
MongoDB 系列教程
查看>>
iOS Button选中与取消
查看>>
Linux 下面screen命令的用法
查看>>
清北考前刷题day6下午好
查看>>
C# DataGridView样式 (蓝色)
查看>>
【Red Hat Linux基础】 磁盘分区详细教程
查看>>
查看端口被谁占用了
查看>>
hdu1856: More is better
查看>>