移动端开发需要注意事项

移动端开发需要注意事项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)


相关推荐

  • UNIX的常用命令

    UNIX的常用命令Unix常用命令介绍:  多命令行:“;”多行命令:“\”1、系统关闭reboot、halt/shutdown、poweroff2、passwd命令:修改系统用户密码passwd[username]3、su命令:切换系统用户su[-username]username为空表示root用户4、cat命令:将指定的文件在标准输出到显示器cat [-AbET] [文件名列表]-A      …

  • wordpress自定义搜索

    wordpress自定义搜索默认下,wordpress的搜索范围只有文章的标题和文章内容,无法搜索自定义字段中的内容,现实情况是很多情况下我们可能会要搜索自定义字段中的内容。如果只是想搜索一到两个自定义字段中的内容,可以使用wordpress的内置函数meta_query变量。12345678910111213141516171

  • mysql寻呼最快

    mysql寻呼最快

    2021年12月31日
  • PyCharm下如何使用Git「建议收藏」

    PyCharm下如何使用Git「建议收藏」添加SSH公钥任何基于Git的在线代码托管平台都需要配置电脑的SSH公钥以GitHub为例,在个人设置里面找到对应的位置,点击添加按钮,将电脑用户目录下的.ssh文件夹里的id_rsa.pub文件里面的值复制输入进去,设置一个名字就添加成功了利用PyCharm克隆项目打开PyCharm,如果你原来有项目的话,依次点击左上角的File->CloseProject,如果没有直接…

  • Quartz中时间表达式的设置—–corn表达式

    Quartz中时间表达式的设置—–corn表达式

  • 数据库char转int_char乘int得到什么类型

    数据库char转int_char乘int得到什么类型CONVERT(CHAR,c.battery_board_id)CONVERT(VARCHAR,c.battery_board_id)转载于:https://www.cnblogs.com/gzhbk/p/11268708.html

发表回复

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

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