常见的移动端H5页面开发遇到的问题解决

最新推荐文章于 2024-12-10 15:18:29 发布

阿陈爱学习

最新推荐文章于 2024-12-10 15:18:29 发布

阅读量931

点赞数

文章标签：开发语言前端 ui

本文链接：https://blog.csdn.net/weixin_41510467/article/details/134314939

版权

本文总结了移动端H5页面开发中遇到的各种问题，包括图片模糊、禁止缩放、全屏模式、电话号码识别、input type=number、select设置、click延迟、audio autoplay失效、样式兼容性、动画问题等，并提供了详细的解决方案。对于iOS和Android平台特有的问题，如键盘事件、字体优化、输入法间隔、点击事件触发等也进行了讨论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手机共通问题

问题一:用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?

经研究发现是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页字会非常小,所以苹果就把iPhone 4的960640分辨率在网页里只显示了480320,这样devicePixelRatio＝2;现在android比较乱,有1.5/2/3等,想让图片在手机里显示更为清晰必须使用2x的背景图来代替img标签(一般情况都是用2倍),例如一个div的宽高是100100,背景图必须得200200,然后background-size:contain;,这样显示出来的图片就比较清晰了;代码如下:

background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;
display:inline-block; 
width:100%; 
height:50px;

问题二:防止手机中网页放大和缩小

这点是手机站开发者都应该知道的,就是设置meta中的viewport;有些手机站有如下声明:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

设置DTD的方式是XHTML的写法,假如页面运用的是h5可以不用设置DTD,直接声明

使用viewport使页面禁止缩放,通常把user-scalable设置为0来关闭用户对页面视图缩放的行为

<meta name="viewport" content="user-scalable=0" />

为了更好的兼容,我们使用完整的viewport设置

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

问题三:如何设置Web应用以全屏模式运行

apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行;语法:

<meta name="apple-mobile-web-app-capable" content="yes"> //content设置为yesWeb应用会以全屏模式运行,反之则不会;content的默认值是no,表示正常显示,可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示

问题四:如何启动或禁用自动识别页面中的电话号码

html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了

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

format-detection可以启动或禁用自动识别页面中的电话号码;语法:

<meta name="format-detection" content="telephone=no"> //默认情况下设备会自动识别任何可能是电话号码的字符串,设置telephone=no可以禁用这项功能,设置不识别邮箱和地址也同理

问题五:h5网站input设置为type=number的问题

h5网页input的type设置为number一般会产生三个问题:

问题1:maxlength属性不好用

解决,我目前用的是js

<input type="number" oninput="checkTextLength(this ,10)">
<script type="text/javascript">
    function checkTextLength(obj, length) {
        if(obj.value.length > length)  {
            obj.value = obj.value.substr(0, length);
        }
    }
</script>

问题2:form提交的时候默认取整

因为form提交默认做了表单验证,step默认是1,要设置step属性,假如保留2位小数,写法如下:

<input type="number" step="0.01" /> //input中type=number一般会自动生成一个上下箭头,点击上箭头默认增加一个step,点击下箭头默认会减少一个step;number中默认step是1,也就是step=0.01可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01;step和min一起使用时数值必须在min和max之间

问题3:部分安卓手机出现样式问题

去除input中这些默认样式:

input[type=number] {
    -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

去除input默认样式的方法:

input,textarea {
    border: 0;
    -webkit-appearance: none; //可同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现,加了此属性后,iOS下默认还是有圆角的,不过可以用border-radius属性修改
}

问题六:select下拉选择设置问题

问题1:右对齐实现

设置如下属性

select option {
    direction: rtl;
}

问题2:唤起select的option展开

zepto方式:

$(sltElement).trrgger("mousedown");

原生js方式:

function showDropdown(sltElement) {
    var event;
    event = document.createEvent('MouseEvents');
    event.

最低0.47元/天解锁文章