移动端开发需要注意事项

全栈程序员-站长 • 2022年6月24日上午9:16 • 未分类 • 阅读 24

大家好，又见面了，我是你们的朋友全栈君。

1. webkit内核中的一些私有的meta标签

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。

2.块级化a标签

请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大

3.自适应布局模式

在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率。

4.ios和android下触摸元素时出现半透明灰色遮罩

Element {
   -webkit-tap-highlight-color:rgba(255,255,255,0)
}

5.Retina屏的1px边框

Element{
   border-width: thin;
}

6.IOS中input键盘事件keyup、keydown、keypress支持不是很好

用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！

解决办法：

可以用html5的oninput事件去代替keyup

<input type="text" id="testInput">
<script type="text/javascript">
    document.getElementById('testInput').addEventListener('input', function(e){
        var value = e.target.value;
    });
</script>

7.防止手机中网页放大和缩小，这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport

还有就是，有些手机网站我们看到如下声明：

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile1.0//EN""http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
设置了DTD的方式是XHTML的写法，假如我们页面运用的是html5，可以不用设置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" />
当然，user-scalable=0,有的人也写成user-scalable=no，都可以的。

8.上下拉动滚动条时卡顿、慢

 body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

9.如何解决盒子边框溢出

当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊的样式-webkit-box-sizing:border-box;用来指定该盒子的大小，包括边框的宽度。

10.如何解决Android 2.0以下平台中圆角的问题

在对一个元素定义圆角时，为完全兼容android 2.0以下的平台，我们必须要按照以下技巧来定义边框圆角：

-webkit这个前缀必须要加上（在iOS中，你可以不加，但android中一定要加）；
如果对针对边框做样式定义，比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。
假如我们有这样的视觉元素，左上角和右上角是圆角时，我们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:5px;然后再依次的覆盖左下角和右下角，-webkit-border-bottom-left-radius:0; -webkit-border-bottom-right-border:0;否则在android 2.0以下的平台中将全部显示直角，还有记住！-webkit这个前缀一定要加上！

还有好多事项今后有时间在添加吧

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/152701.html原文链接：https://javaforall.net

移动端开发需要注意事项

1. webkit内核中的一些私有的meta标签

2.块级化a标签

3.自适应布局模式

4.ios和android下触摸元素时出现半透明灰色遮罩

5.Retina屏的1px边框

6.IOS中input键盘事件keyup、keydown、keypress支持不是很好

解决办法：

7.防止手机中网页放大和缩小，这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport

8.上下拉动滚动条时卡顿、慢

9.如何解决盒子边框溢出

10.如何解决Android 2.0以下平台中圆角的问题

相关推荐

Java内存管理-Stackoverflow问答-Java是传值还是传引用？（十一）

约瑟夫环问题递归解法的一点理解

numpy中矩阵转成向量使用_a与b的内积等于a的转置乘b

BeanUtils中copyProperties的使用[通俗易懂]

如何设计单元测试用例「建议收藏」

windows下面安装Python和pip终极教程「建议收藏」

发表回复