• 24小时服务热线:400-088-1128

当前位置 南顺网络>> 知识拓展

移动端开发需要注意事项

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





第一个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



7.防止手机中网页放大和缩小

这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport
还有就是,有些手机网站我们看到如下声明:


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

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


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


当然,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这个前缀一定要加上!

————————————————

版权声明:本文为CSDN博主「Mr.zhang℡」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

来源:csdn

原文链接:https://blog.csdn.net/weixin_44885062/article/details/97684572