移动端前端笔记大全
发布日期:2021-08-19 19:59:58 浏览次数:2 分类:技术文章

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

1、

IOS的机子,默认英文输入法状态下,首字母是自动大写的,有时候挺烦人的。

我们写页面的时候有没有办法把这个自动大写关闭呢?autocapitalize的属性可以实现:    

在iOS中,默认情况下键盘是开启首字母大写的功能的,如果业务不想出现首字母大写,可以这样:

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

 

 

和英文输入默认自动首字母大写那样,IOS还做了一个功能,默认输入法会开启自动修正输入内容,这样的话,用户经常要操作两次。所以这个功能有方便和不方便之处,如果有些业务不需要这个功能,可以通过前端代码关闭。

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

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

 

3、

 

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

 

 

 

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

 

 

需要注意的是,PC端的该属性已经被移除,该属性在移动端要生效,必须设置 `meta viewport'。

 

 

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

 

 

 

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

 

 

 

 

 

5、

 

 

今天来mark一下在做移动端开发时,如何做邮箱地址识别:

在 Android (iOS不会)上,浏览器会自动识别看起来像邮箱地址的字符串,不论有你没有加上邮箱链接,当你在这个字符串上长按,会弹出发邮件的提示。

关闭邮箱地址识别:

 

 

 

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

 

开启邮件发送:

 

 

<
mailto:dooyoe@gmail.com"
>dooyoe@gmail.com
</
a
>

 

 

6、

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

    - 7位数字,形如:1234567

    - 带括号及加号的数字,形如:(+86)123456789

    - 双连接线的数字,形如:00-00-00111

    - 11位数字,形如:13800138000

可能还有其他类型的数字也会被识别,但在具体的业务场景中,有些时候这是不必须的,所以你可以关闭电话自动识别,然后在需要拨号的地方,开启电话呼出和短信功能。

(1)关闭电话识别:

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

(2)开启电话功能:

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

(3)开启短信功能:

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

7、

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

    - 早期的时候,移动端的浏览器都不支持非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),而且还有回弹滚动的内置滚动条,官方地址:

8、

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

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

就这么简单,但是目前只支持webkit内核的浏览器。

9、

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

.xxx {
    
-webkit-tap-highlight-
color
: rgba(
0
0
0
0
);
}

这个设置,在大部分机子上都是起效果的。但是,移动端三星自带浏览器,点击页面任意a标签时,设置-webkit-tap-highlight-color:rgba(0,0,0,0)还是会有阴影底色,这应该是浏览器强制加上去的,通过代码设置也无法覆盖。

有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签,可以解决这个问题。

10、

做移动端H5页面时,经常踩到不少坑,感觉也是时候整理一下移动端开发笔记了,遇到问题能够快速响应,节省开发时间。今天先mark一下在移动端如何禁止保存或拷贝图像:

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

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

PS:需要注意的是,该方法只在 iOS 上有效。

 

转载于:https://www.cnblogs.com/yjhua/p/4581462.html

转载地址:https://blog.csdn.net/weixin_30951743/article/details/95895651 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Android studio启动后卡在refreshing gradle project
下一篇:Digital Roots

发表评论

最新留言

第一次来,支持一个
[***.219.124.196]2024年03月31日 05时41分42秒