书写手机移动页面时的一些坑

标签: 书写 手机 移动 | 发表时间:2017-07-03 05:51 | 作者:webxiaoma
出处:http://blog.csdn.net

今天总结一下在写手机移动端页面时的一些注意事项。在写手机移动端页面时,我们有时候会稀里糊涂的遇到一些坑。同时手机页面的一些展示和我们pc端页面的展示是有一些区别的。

一、书写移动端时需注意的 meta 标签

1. 第一个标签(最重要的标签)

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

width=(number || device-width) -设置文档的宽度,device-width表示文档宽度等于设备宽度, 在安卓下对number 值得设置支持不是太好
initial-scale:() - 初始的缩放比例
minimum-scale:() - 允许用户缩放到的最小比例
maximum-scale:() - 允许用户缩放到的最大比例
user-scalable:(yes || no) - 用户是否可以手动缩放 ios10 无效

2.去掉手机数字和邮箱的识别功能

  <meta name="format-detection" content="telephone=no,email=no">

如果你想想让用户拨打电话或发送邮箱可以这样做:

  <a href="tel:13288888888">13288888888</a>
<a href="email:13288888888@163.com">13288888888@163.com</a>

3.QQ强制竖屏或横屏显示(x5内核浏览器中有效)

  <meta name="x5-orientation" content="portrait || landscape">

x5内核的浏览器:QQ浏览器,微信和qq内置浏览器
4.QQ设置全屏显示

  <meta name="x5-fullscreen" content="true">

5.UC强制竖屏或横屏显示

  <meta name="screen-orientation" content="portrait || landscape">

6.UC全屏显示

  <meta name="full-screen" content="yes">

二、书写移动端时需注意的css 样式

1.清除(设置)点击a标签时的高亮颜色

  -webkit-tap-highlight-color:颜色

手机端我们用a 标签包裹的内容,默认点击时有高亮颜色

2.消除按钮圆角

  -webkit-appearance:none;

清除手机端按钮默认的圆角。清除后还是有些圆角样式,我们可以在加 border-radious:0; 可以彻底清除

3.选中文字设置(部分手机上有效果,安卓手机似乎有问题)

  -webkit-user-select:none;

去除掉长按文字时选中文字的样式。

4.禁止文字缩放

  -webkit-text-size-adjust:100%;

在手机横竖屏时,用于禁止文字缩放,用处也不是很大

三、书写移动端时的一些坑

1.Font Boosting 问题
在一段文字我们没有给他设置高度的时候,在webkit 内核下,文字的大小被浏览器放大了。
解决方法:
①设置高度
②设置最大高度(max-height)

2.Fiexd 问题
在手机端支持不是太好,有时候,将头部固定到最上边,滚动页面时,可能会出现抖动现象。尽量不要使用。

3.IOS的body的overflow 问题

在ios 下如果给body一个 overflow:hidden 页面不起作用,并没有将元素超出的部分隐藏。
解决方法:
在最外层包裹一个div,将 overflow:hidden 设置在这个div上。

作者:webxiaoma 发表于2017/7/3 12:59:37 原文链接
阅读:15 评论:0 查看评论

相关 [书写 手机 移动] 推荐:

书写手机移动页面时的一些坑

- - CSDN博客推荐文章
今天总结一下在写手机移动端页面时的一些注意事项. 在写手机移动端页面时,我们有时候会稀里糊涂的遇到一些坑. 同时手机页面的一些展示和我们pc端页面的展示是有一些区别的. 一、书写移动端时需注意的 meta 标签. width=(number || device-width) -设置文档的宽度,device-width表示文档宽度等于设备宽度, 在安卓下对number 值得设置支持不是太好.

手机钱包化 — 漫谈移动支付

- 為 - 爱范儿 · Beats of Bits
随着智能手机的普及,移动支付领域也开始快速发展,以手机为中心,尽量简化支付手续的移动支付公司大量涌现,这将是未来几年内非常火热的一个领域. 这其中,不同的公司走了不同的道路,有些传统,有些激进,不过归根结底,还是以方便商家为目的,利用自己的平台,把原来信用卡公司收取的费用转移到自己荷包里来. 对于很多之前只收现金的商家来说(比如广大中国餐馆),这扩展了自己的支付方式,也避免了与信用卡公司扯皮的麻烦,对生意本身很有好处.

WPS Office移动版(Android)限时免费,送小米手机

- lichzy - 够趣堂
WPS Office 2012正式推出了依然保持了一贯的小巧易用,借助于其海量的模板库以及良好的同步“云”储存更是被用户津津乐道. 然后作为WPS Office产品另一重要部分的移动版Android办公软件–Kingsoft Office 4.0也很给力的推出了限时免费的活动(9.19-9.21,为期三天),只要在这期间安装、升级到4.0版本输入邮箱即可免费升级到正式版(无限制使用全部功能),另外在这3天联网使用的话即可参与抽奖活动,奖品为小米手机.

移动通信技术发展 卫星手机呼之欲出

- 品味视界 - cnBeta.COM
人们在偏远地区时常常苦于手机没有信号,打不了电话,上不了网,遇到紧急情况无法与外界及时沟通. 这一状况将随着卫星移动通信服务的普及而成为历史,具有卫星电话功能的手机正呼之欲出. 现有手机靠分布在地面的通信基站发射和接收信号. 受地面基站分布不均的影响,手机用户在偏远地区很难甚至无法收发信号. 相比之下,卫星电话通过分布在太空的卫星传输信号,具有机动性强、覆盖范围大、可靠性好、传输效率高等优点,是现有手机无法比拟的.

手机上的大数据:移动互联网的入口

- - 雷锋网
【编者按】本文由百分点信息无线业务部高级总监李晓东、Talkdata COO徐懿以及成都电子科大的龚亮联合撰写. 随着移动互联网的的发展,一些在传统互联网上已经被解析无数次的“观念”也在移动互联网上出现. 例如,互联网的入口,在目前,移动互联网并没有一家独大的情况出现,似乎也没有这种情况出现的可能.

移动端手机网站优化的11个注意事项

- - 互联网分析
从事网络营销的人员不会否认,移动互联网营销是一个大的趋势, 但是怎么样去做恐怕还都一筹莫展. 由PC端的网络营销的经验和常识来看,首要的是要做好移动端手机网站的优化工作. 据小生的观察以及众多互联网的数据分析 来看,目前国内的大多数并没有做好手机网站的优化,有的只是由PC端网站copy成简单的移动版本的wap网站,基本没有做优化.

移动APP手机兼容性测试初步

- - 大魔 I'm Png
Web开发需要做各种浏览器兼容测试,移动APP开发需要做各种设备兼容性测试. 对各种设备的兼容测试,主要集中在2点:. 不同Android OS版本的测试,如Android 2.3, Android 4.1. 不同屏幕密度的测试,如320*240(QVGA),480*320(HVGA),800*480(WVGA).

9个最新的手机/移动设备jQuery插件

- - 设计达人
随着互联网的流行,移动网站开始急速增加,在2014年手机网站将会出现很多,所以手机网站是必须要学会制作的. 手机网站不像桌面平台一样制作,否则会影响显示效果,目前大部分手机网站使用 响应式设计技术,而且也很流行. 但是新手想实现响应式技术是不容易的,所以我们可以用一些响应式框架或适用于移动设备的jQuery插件来制作,这样能方便实现我们的需求.

联通手机支付12月商用 中移动手机钱包即将发布

- - TechWeb 今日焦点 RSS阅读
  【搜狐IT消息】(文/宿艺)中国联通首个手机支付产品昨天正式推出,用户可通过指定联通营业厅将招商银行账户加载到专用手机USIM卡上,即可实现在中国银联POS终端(具有中国银联闪付Quickpass标志)上直接刷卡消费.   据介绍,与传统手机支付产品不同,此次推出的手机钱包产品将银行的PBOC2.0贷记+电子现金应用加载在手机USIM卡中,成为国内第一个以SWP-USIM卡为载体,依托联通WCDMA 3G网络及3G JAVA卡多应用管理与下载平台,通过NFC智能手机和掌上生活手机客户端对银行账户进行管理的解决方案.

广州移动手机短信内容被搜索引擎收录

- hugh - Solidot
朽木 写道 "在Google的输入框中输入“filetype:txt site:10086.cn”进行搜索,反馈的结果页面让人惊掉了下巴:中国移动手机用户的私人短信竟然被显示出来. 如果注意结果页面的链接地址,你该庆幸还是提心吊胆. 因为链接的域名几乎全是gd.10086.cn,也就是说可能只是广东移动用户的短信被搜索出来.