起航学习网 - 轻松学习拿文凭从此开始!

起航学习网

当前位置: 起航学习网 > 短期培训 > Web前端 > 移动web开发与pc端网页是否一样

移动web开发与pc端网页是否一样

时间:2016-10-11 21:37来源:WEB前端网 作者:IT培训网 已有: 名学员访问该课程

前言:在做移动 Web开发时有很多地方跟 PC 端是不一样的,需要不一样的设置,这里就记录下移动 Web 开发中有用的设置和一些通用代码。

有人问,移动web开发和pc端是否一样呢,虽然看着都是一个页面而已,但其中的制作方法却大不相同,今天就随小编看一下吧!

在做移动 Web 开发时有很多地方跟 PC 端是不一样的,需要不一样的设置,这里就记录下移动 Web 开发中有用的设置和一些通用代码。

我的博客地址

HTML

设置页面宽度等于设备宽度,并禁止用户缩放页面

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

忽略页面中的数字识别为电话,忽略email识别

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

开启对web app程序的支持(仅针对IOS系统)

网站开启对web app程序的支持,其实意思就是删除默认的苹果工具栏和菜单栏,开启全屏显示

<meta name="apple-mobile-web-app-capable" content="yes" />

改变顶部状态条的颜色(仅针对IOS系统)

在 web app 下状态条(屏幕顶部条)的颜色默认值为 default(白色),可以定为 black(黑色)和 black-translucent(灰色半透明);

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

完整的HTML模板

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection" content="telphone=no, email=no" /> <title>标题</title> </head> <body> 这里开始内容 </body> </html>

CSS

css reset

html{     -webkit-tap-highlight-color: rgba(0,0,0,0);/*去掉触摸遮盖层*/     -webkit-user-modify: read-write-plaintext-only;     -webkit-user-select: none;/*禁止用户选择文字*/ }  /*设置所有盒子大小计算边框内*/ *, *:before, *:after {     box-sizing: border-box; }  /*消除输入框的阴影和边框*/ input,textarea, select{     -webkit-appearance: none; /*去掉webkit默认的表单样式*/     appearance: none;     outline: none;     border: none; } 

消除transition动画闪屏

.animate {     -webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/     -webkit-backface-visibility: hidden; /*设置进行转换的元素的背面在面对用户时是否可见:隐藏*/ } 

开启硬件加速

解决页面闪白,保证动画流畅。

.css {    -webkit-transform: translate3d(0, 0, 0);    -moz-transform: translate3d(0, 0, 0);    -ms-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0); } 

其他

关于打电话、发短信、发邮件的实现

<a href="tel:10086">打电话给:10086</a>  <a href="sms:10086">发短信给:10086</a>  <a href="mailto:zhangxy_92@outlook.com">发邮件给:zhangxy_92@outlook.com</a> 

关于布局

移动端中对于flexbox的支持已经很好,flexbox是布局神器。阮一峰老师写过flexbox 入门教程;以后自己可能也会写一篇flexbox的学习和总结笔记。

 (责任编辑:达内IT培训网)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------

报 名 此 课 程 / 咨 询 相 关 信 息
课程名称
报考类别
*
真实姓名
* 性 别
联系电话
* 联系QQ:
所在地区
咨询内容
验证码: 看不清?点击更换

   
 
 
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
培训学校
达内IT培训网 访问该机构站点 报名留言 加为好友 用户等级:注册会员 用户级别:10 机构名称:达内培训 联 系 人:王老师 联系电话:0371-55025032 联系手机: 在线客服:起航学习网客服 在 线 QQ:起航学习网客服 电子邮件:3158895217@qq.com 网站域名:http://www.cnitedu.cn 注册时间:2016-07-18 11:07 最后登录:2017-09-23 08:09
推荐内容
意见反馈 起航网首页 返回顶部