移动端开发需要注意事项

移动端开发需要注意事项1.webkit内核中的一些私有的meta标签<metacontent=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0″name=”viewport”><metacontent=”yes”name=”apple-mobile-web-app-capable”>…

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

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以下的平台,我们必须要按照以下技巧来定义边框圆角:

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152701.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Git:代码冲突常见解决方法[通俗易懂]

    Git:代码冲突常见解决方法[通俗易懂]Git:代码冲突常见解决方法

  • kong网关作用_网关的基本功能

    kong网关作用_网关的基本功能转载李亚飞大佬的文章:https://www.lyafei.com/Kong网关简介安装之前简单介绍安装了Kong,这篇就是深入Kong详细讲述下它的一些工作原理、核心概念。附上:Kong官网:https://konghq.com/KongGitHub地址:https://github.com/kong/kongKong的工作原理Kong默认开放的端口接收客户端流量的端口,proxy部分:8000——http端口:8443——https端口adm.

  • js一篇汇总

    一.js的数据类型和变量JavaScript有六种数据类型。主要的类型有number、string、object以及Boolean类型,其他两种类型为null和undefined。

    2021年12月24日
  • SQL SERVER拼接字符串(字符串中有变量)

    SQL SERVER拼接字符串(字符串中有变量)一、拼接字符串(整个字符串不分割)步骤:  1、首先在字符串的前后加单引号;  2、字符串中的变量以’’’+@para+’’’在字符串中表示;  3、若在执行时存在类型转换错误,则应用相应的类型转换函数,对变量进行类型转换(如cast()函数)。示例一:包含SQL拼接字符串的存储过程:CreateProcedureTest@TestIDintAsDeclare@sn…

  • Java的八种基本数据类型

    Java的八种基本数据类型1.byte:字节1.计算机中,数据传输大多是以“位”(bit,比特)为单位。2.一位就代表一个0或1(二进制),每8个位(bit)组成一个字节(byte),所以,1个字节=8位0101代码。2.short3.int4.long5.float6.double7.char1.char类型占2个字节(16位),用来表示字符。2.char是基本数据类型。String表示字符串,是类类型。一个String是由0~n个char组成。3.字符使用单引号表示,字符串使用双引号表示。8.boolea

  • Java WebService 客户端写法[通俗易懂]

    Java WebService 客户端写法[通俗易懂]这篇文章的前提是已经服务器端已经存在。变成工具:1.MyEclipse8.62.Tomcat7.03.JDK1.64.实现WebService服务的插件有很多,我选择的XFire我服务器端的WebServiceURL为:http://localhost/Homepage/services/DataInfoService?wsdl使用MyEclip

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号