css 清空ios端_H5移动端开发常见的问题处理
稍微整理了几个经常在H5移动端开发遇到的东西
不用说我也知道,此类文章太多太多了,常见的譬如:
viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影(这个我觉得真没必要去掉,用户点击是需要反馈的,而这个背景色刚刚好提供了一种反馈)等等,太多啦,这些相信大家百度一下就可以查到很多资料
本篇文章主要是讲一些其他的或者优化手段。内容不多
1. 弹出数字键盘
安卓跟IOS的表现形式应该不一样,大家可以自己试试。当运用了正则pattern后,就不用关注input的类型了
2. 调用系统的某些功能
打电话给: 10086
发短信给: 10086
发邮件给:839626987@qq.com
同上♂️
3. 打开原生应用
打开微信
打开支付宝
打开支付宝的扫一扫功能
打开支付宝的蚂蚁森林
这种方式叫做URL Scheme,是一种协议,一般用来访问APP或者APP中的某个功能/页面(如唤醒APP后打开指定页面或者使用某些功能)
URL Scheme的基本格式如下:
行为(应用的某个功能/页面)
|
scheme://[path][?query]
| |
应用标识 功能需要的参数
一般是由APP开发者自己定义,比如规定一些参数或者路径让其他开发者来访问,就像上面的例子
注意事项:
- 唤醒APP的条件是你的手机已经安装了该APP
- 某些浏览器会禁用此协议,比如微信内部浏览器(除非开了白名单)
后面应该会专门写一篇文章用来探讨唤醒APP
4. 解决active伪类失效
给body注册一个空事件即可
5. 忽略自动识别
当页面上的内容包含了手机号/邮箱等,会自动转换成可点击的链接
比如你有如下代码:
13192733603
但是有些浏览器会识别为手机,并且可以点击拨号
6. 解决input失焦后页面没有回弹
一般出现在IOS设备中的微信内部浏览器,出现的条件为:
- 页面高度过小
- 聚焦时,页面需要往上移动的时候
所以一般input在页面上方或者顶部都不会出现无法回弹
解决办法为,在聚焦时,获取当前滚动条高度,然后失焦时,赋值之前获取的高度:
6. 禁止长按
以上行为可以总结成这几个(每个手机以及浏览器的表现形式不一样):长按图片保存、长按选择文字、长按链接/手机号/邮箱时呼出菜单。
想要禁止这些浏览器的默认行为,可以使用以下CSS:
// 禁止长按图片保存
img {
-webkit-touch-callout: none;
pointer-events: none; // 像微信浏览器还是无法禁止,加上这行样式即可
}
// 禁止长按选择文字
div {
-webkit-user-select: none;
}
// 禁止长按呼出菜单
div {
-webkit-touch-callout: none;
}
7. 滑动不顺畅,粘手
一般出现在IOS设备中,自定义盒子使用了overflow: auto || scroll后出现的情况。
优化代码:
div {
-webkit-overflow-scrolling: touch;
}
8. 屏幕旋转为横屏时,字体大小会变
具体出现的情况不明,有时候有有时候没有,欢迎指出。
优化代码:
* {
-webkit-text-size-adjust: 100%;
}
9. 最简单的rem自适应
大家都知道,rem的值是根据根元素的字体大小相对计算的,但是我们每个设备的大小不一样,所以根元素的字体大小要动态设置
html {
font-size: calc(100vw / 3.75);
}
body {
font-size: .14rem;
}
效果如下:
像我一般的话,直接搞lib-flexible、postcss-pxtorem就完事啦!
10. 滑动穿透
当你想在出现遮罩的时候,锁住用户的滚动行为,你可以这么做。
假设HTML结构如下:
CSS样式如下:
.mask {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: rgba($color: #333, $alpha: .6);
.content {
padding: 20px;
background-color: #fff;
width: 300px;
}
}
效果如下:
可以看到,当在遮罩上滑动的时候,是会穿透到父节点的,最简单的办法就是阻住默认行为:
document.querySelector(".mask").addEventListener("touchmove
css 清空ios端_H5移动端开发常见的问题处理相关推荐
- css 清空ios端_CSS 修改 IOS 默认按钮样式
CSS 修改 IOS 默认按钮样式 不知道大家在做移动端页面的时候有没遇到过在 IOS 端 一些按钮显示和安卓的截然不同,今天下午又有一个小伙在群里问这个问题.我记得之前我也遇到过,今天给大家分享一下 ...
- 【大前端】使用html/css/javascript开发移动端(安卓,IOS)与桌面端(Win,mac,Linux)应用程序
1.什么是大前端? 传统上,Web应用可分为前端(在浏览器中执行的部分)和后端(在服务器中执行的部分). 前端工程师的职责是以Web技术(HTML.CSS.JavaScript.DOM.Ajax等)实 ...
- unity3D埃及探险游戏源码,支持安卓+IOS双端 unity2019 C#语言开发
unity3D埃及探险游戏源码,支持安卓+IOS双端 unity2019 C#语言开发.完整的源码可直接运营.拿来学习研究和二次开发都很不错. 源码下载 unity3D埃及探险游戏源码C#语言开发.完 ...
- Unity密室逃脱-逃离房间游戏源码.,支持安卓+IOS双端 unity2021 C#语言开发
Unity密室逃脱-逃离房间游戏源码.,支持安卓+IOS双端 unity2021 C#语言开发.完整的源码可直接运营.拿来学习研究和二次开发都很不错. 源码下载 unity密室逃脱-逃离房间游戏源码C ...
- unity休闲游戏象棋游戏源码,支持安卓+IOS双端 unity2019 C#语言开发
unity休闲游戏象棋游戏源码,支持安卓+IOS双端 unity2019 C#语言开发.完整的源码可直接运营.拿来学习研究和二次开发都很不错. 源码下载 unity休闲游戏象棋戏源码C#语言开发-Un ...
- unity飞行模拟游戏源码,支持安卓+IOS双端 unity2019 C#语言开发
unity飞行模拟游戏源码,支持安卓+IOS双端 unity2019 C#语言开发.完整的源码可直接运营.拿来学习研究和二次开发都很不错. 源码下载 unity2019飞行模拟游戏源码C#语言开发-U ...
- 手把手带你开发一款云开发版点餐小程序,微信扫码点餐,店铺地图导航,外卖小程序,用户端和后厨端都有
从今天开始带领大家实现一款云开发版的点餐小程序 视频讲解:<云开发后台+微信扫码点餐小程序+cms网页管理后台> 技术选型 1,前端 微信小程序原生框架 css JavaScript 2, ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- 移动端H5页面编辑器开发实战--原理结构篇
一.前言 在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...
最新文章
- 143. Leetcode 78. 子集 (回溯算法-子集问题)
- 最短路径问题 --- Dijkstra算法详解
- python 装饰器 三 (带有参数的装饰器)
- RuoYi-Cloud 部署篇_03(linux环境 Mysql+nginx版本)
- Spring : Bean延时加载注解(@Lazy)
- Linux下修改Mysql的用户(root)的密码的俩种方法
- Xcode app修改项目名
- nodejs npm和yarn 源管理模块 yrm(记录方便查看)
- 计算机专业计算机二级java有用吗_计算机二级java含金量如何 对就业有帮助吗
- 案例实践:零基础完成Loadrunner压力测试,十分钟教会你
- 传统蓝牙HCI(Bluetooth HCI)的概念介绍
- 大神如何用油猴提升前端开发效率 ?
- Anaconda修改国内镜像源
- VMware虚拟机安装Ubuntu系统步骤详解
- 学习Android开发只要这些东西,Android篇
- 在阿里云ACP认证考试中授权码有效期时限是多久?
- python怎么设置dos_Windows下Python环境的配置和Dos界面的调用
- [vue-router] Named Route ‘Layout‘ has a default child route. When navigating to this named route (:t
- icon-font的使用
- #Python第三方模块学习笔记(四)——CSV模块功能及主要函数介绍