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

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

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

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

我的博客地址

HTML

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

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

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

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

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

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

完整的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的学习和总结笔记。

文章出自：http://qh.itpxw.cn/peixun/web/201636479.html

文章标题：移动web开发与pc端网页是否一样

免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉

你也许会喜欢如下的文章？

Web前端开发工程师必备的职业习惯有哪些?	2021年Web前端开发自学之路指南
Web前端开发面试的常见面试题汇总	Web前端开发工程师要掌握的JavaScript小技巧分享
Web前端开发的常用开发工具汇总	Web前端开发零基础要了解的Web前端开发知识汇总
Web前端开发中实现跨域的方法有哪些?	听说这几类人更适合做Web前端开发，看看有你吗?
参加Web前端开发面试必备的CSS知识点	Web前端开发性能优化之JavaScript篇

(责任编辑：IT培训网)

起航学习网

搜索

热门标签:

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