移动端H5常见问题

最新推荐文章于 2023-10-25 14:56:22 发布

娃哈哈_

最新推荐文章于 2023-10-25 14:56:22 发布

阅读量1.1k

点赞数

分类专栏： H5 文章标签： html h5 html5 ios 移动端

本文链接：https://blog.csdn.net/qq_36131788/article/details/111695587

版权

H5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、click事件，a href无效在APP中无效：

场景：H5中绑定了click事件进行页面跳转，微信浏览器，手机内置浏览器测试没问题。内嵌到某APP中，点击事件无效，通过a标签href跳转也无效（IOS无效，安卓有效）

解决方法：
将click事件换成touchend事件进行跳转页面。

2、swipe组件，上滑翻页，在移动端真机环境中有闪白屏情况

场景：做一个活动H5页面，有上滑翻页效果。用到了swipe组件，在微信开发者平台中测试没问题。到真机上，一滑屏翻到下一页，就有闪屏效果，出现频率很高。

解决方法：

.swipe{
  height: 100vh;
  transform:translate3d(0,0,0);   // 设置此属性
  overflow:hidden;
}
.swipe-item {
  transform:translate3d(0,0,0);
}

3、手机号码、邮箱的识别

场景：在移动端，H5页面的数字常被识别和处理成可拨打的电话，符合邮箱格式的识别为邮箱。

借助meta标签关闭识别：

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

开启电话号码识别：

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

开启邮箱识别：

<a mailto:12@qq.com>12@qq.com</a>

4、IOS，安卓软键盘弹起差异

IOS: 当input输入框在页面中的位置比软键盘高度高时，页面不会滚动。否则软键盘弹起，页面被顶上去，出现滚动条~

5、IOS 微信浏览器底部返回条

在微信公众号H5页面开发中，打开H5页面，IOS下方会有返回键导航栏(安卓中无底部返回条)，该导航栏占用一定的页面高度，导致页面高度缩小。
对于必须一屏展现所有内容的页面来说，注意页面底部元素是否显示完整~

IOS（iphone6）设计尺寸：
1、界面尺寸大小是：750x1334px。
2、状态栏(status bar)：就是电量条，其高度为：40px;
3、导航栏(navigation)：就是顶部条，其高度为：88px;
4、主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px;
5、内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px
在这里插入图片描述

6、IOS input拍照上传会自动旋转90度

IOS13.4版本版本之前，上传后的图片会自动选择90度，所以需要前端手动再调回90度。若引用的是第三方上传组件，可能第三方已经处理了此类问题。
但13.4及以上版本IOS已经解决了此类问题，前端不需要再做处理了。

遇到拍照上传问题，一定要在不同机型中加以验证！！

7、IOS在微信公众号中返回按钮点击时，只是返回的之前页面的快照（静态页面），之前页面没有重新渲染。

Android中微信公众号不提供回退键,而是监听手机自带的回退按钮, 回退回前一个页面时页面会被强制刷新;
IOS中微信公众号提供了默认的回退键, 但是在回退时,页面不会刷新,设置页面中的Meta缓存标签也没有用;
原因：Page Cache/Back-Forward Cache
解决方法：（亲测有效）

// onpageshow 事件在每次加载页面时触发
	if(window.browser.versions.ios) {
        window.addEventListener('pageshow', function (event) {
            alert('pageshow');
            //event.persisted属性为true时，表示当前文档是从往返缓存中获取
            if(event.persisted) location.reload(); 
        });
    }

8、安卓下微信公众号菜单配置的H5页面，JS SDK验签失败（vue history路由）

详情参考：vue spa history模式 jssdk注入 invalid signature解决

9、IOS input 和textarea表单默认会有个内阴影

可通过设置下面代码去掉：-webkit-appearance: none;

10、在IOS下，input 光标偏下

css设置line-height值

11、input type="search"实现自动搜索，移动端默认会有x

详情参考

// 去除 后面的 X号
input[type="search"]::-webkit-search-cancel-button{
  display: none;
  autocomplete:off;
}

未完待续！！