webapp(html5 ),移动前端webapp(html5页面)
CSS3+HTML5几乎可以毫无顾忌的使用,然后浏览器端考虑webkit内核的就差不多了。
1
2
3
4
第一个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览,在ios上,用户将网页添加到主屏后,再从主屏幕打开这个网页,可以隐藏浏览器的地址栏和下面的toolbar;
第二个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式,其值有三个:default、black、black-translucent。
第四个meta标签是指在发送到屏幕的时候默认的命名。
2
用户添加到主屏后,如果网站没有图标,则默认主屏上的图标为当前网页的截图,你可以通过下面的代码指定在普通和retina屏幕上的icon:
1
2
添加初始化图片
用户点击你桌面上的webapp的图标后,打开会加载浏览器(实际上是webkit webview模块),然后下载、解析、渲染,在这个过程中,ios允许我们使用一个初始化图片来替代白色的浏览器屏幕:
1
2
3
关闭iOS中键盘自动大写、自动更正、自动完成
在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为 input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。还有的是自动更 正、自动完成给你可以一并取消:
1
文件上传, 从相机捕获媒体
1
2
3
电话短信
1
2
3
发送短信附带内容 的链接
Call us at 18888886666 拨打电话的链接
移除 iOS 默认的按钮样式
在iOS 中,默认会将所有的按钮(input)强制加上一个圆角和渐变样式(IOS7的不知是怎样的了),要移除这个默认样式,用下面的代码(建议直接reset那里添加):
1
input{-webkit-appearance:none;outline:none;}
iOS 浏览器横屏时会重置字体大小的问题
iOS 浏览器横屏时会重置字体大小,设置 text-size-adjust 为 none 可以解决ios上的问题,但桌面版safari的字体缩放功能会失效,因此最佳方案是将 text-size-adjust 为 100% 。
1
2
3
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
CSS3的transition 闪屏问题
使用css3动画的时尽量利用3D加速,从而使得动画变得流畅(可参考《移动Web 开发中的 Off Canvas 导航》这篇文章)。动画过程中的动画闪白可以通过backface-visibility 隐藏。
1
2
-webkit-transform-style: preserve-3d;/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-backface-visibility: hidden;/*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
其他CSS的杂项
1
2
3
4
-webkit-tap-highlight-color: transparent; /*Mobile上点击链接高亮的时候设置颜色为透明*/
-webkit-user-select: none; /*设置为无法选择文本*/
-webkit-touch-callout: none; /*长按时不触发系统的菜单(禁止ios弹出各种操作窗口), 可用在图片上加这个属性禁止下载图片*/
-webkit-overflow-scrolling: touch;/*快速滚动和回弹,模拟原生app效果*/
click 事件
ios的safari的click事件在短按屏幕时会有明显延迟(相对用户手离开屏幕那一刻大约300ms),因此建议采用 touchstart 事件。或者是说使用封装的 tap 事件来代替click 事件,所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。
其他js杂项
1
2
3
4
5
6
7
8
window.scrollTo(0,0); /*隐藏地址栏*/
window.matchMedia(); /*匹配媒体*/
navigator.connection; /*决定手机是否运行在WiFi/3G等网络*/
window.devicePixelRatio; /*决定屏幕分辨率(iPhone 4值为2, 而Nexus One值为1.5)*/
window.navigator.onLine; /*取得网络连接状态*/
window.navigator.standalone; /*决定iPhone是否处于全屏状态
touch事件 (iOS, Android 2.2+): touchstart, touchmove, touchend, touchcancel
gesture事件 (Apple only, iOS 2+): gesturestart, gesturechange, gesturend give access to predefined gestures (rotation, scale, position)
webapp(html5 ),移动前端webapp(html5页面)相关推荐
- 前端开发和html5,Web前端和HTML5前端相同吗 有区别吗
学习web前端和学习HTML5是否一样呢,当前的社会技术更新太快了,小伙伴们都不知道要学习什么专业了.最近有学员咨询说,什么是web前端,什么是HTML5前端,两者之间有什么区别呢? 今天IT培训网小 ...
- 用户注册登录页面实例 web前端开发HTML5 JavaScript css
根据清华大学出版社的HTML5网页前端设计实战课后实战 代码与注释如下 <!doctype html> <html> <head> <meta charset ...
- HTML5前端页面设计,HTML5网页前端设计
HTML5网页前端设计 编辑 锁定 讨论 上传视频 <HTML5网页前端设计>是2017年6月清华大学出版社出版的图书,作者是周文洁. 书 名 HTML5网页前端设计 作 者 ...
- 一文读懂前端与HTML5技术的区别!
现在好多人都把HTML5和前端的概念弄混淆了.例如,H5是HTML5的简称,而现在好多人把HTML5看成了是前端开发的总称.今天就为各位普及一下,到底前端和HTML5有哪些区别? 什么是前端开发 以一 ...
- 南京html5响应式网站,HTML5响应式布局的设计方法和响应式前端优化
作为一名优秀的web前端人员,不懂响应式布局怎么可以呢? 今天跟大家分享web前端开发和设计的干货:关于响应式布局的设计方法和响应式前端优化. 我们都知道,目前主流的pc屏幕的分辨率都是1366*76 ...
- 为什么要选择html5,5分钟告诉你,为什么要学HTML5大前端
互联网的掘起,让这世界再次被认知能力,5G.人工智能技术.数据分析.云计算技术等.凭着优秀的深度学习.数据处理方法技术性,人们已经以全新升级的层面在平行世界里思索,这一切最后都将在终端设备中完成. H ...
- Web前端与HTML5有什么区别,百分之八十的人分不清
说到Web前端,很多人想到的就是HTML5,加上现在APP和小程序盛行,Web前端开发和HTML5开发都异常火热.外行人很容易将HTML5和Web前端划等号,那Web前端和HTML5是否一样?有些人已 ...
- html5退出全屏触发的方法_好程序员web前端分享HTML5常见面试题集锦二
web前端分享HTML5常见面试题集锦第二篇,希望对大家有所帮助. 1. 方法1: html,body{height: 100%;} body{ margin: 0;display: flex; ju ...
- html5 将id的值用于top_web前端分享HTML5常见面试题集锦四
web前端分享HTML5常见面试题集锦四 1.为什么要初始化CSS样式? 答案:因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异. 当 ...
- 前端 js 非控件 使用标签打印机 打印二维码和文本_青岛Web前端(HTML5)面试题分享...
HTML5是前端开发人员必须掌握的技能之一,那么在面试时,面试官常问到的HTML5的问题有哪些呢? 青岛HTML5 1.Doctype作用?严格模式与混杂模式如何区分?它们有何意义? 答:告知浏览器的 ...
最新文章
- 连接函数vc++笔记---CDatabase类
- C#中选择文件的例子
- 【SSM框架系列】Mybatis基本介绍
- 基于mui框架读取nfc数据_基于NFC的数据采集软件系统的设计与实现
- Angular core.js executeTemplate
- 任重道远——记2016暑假训练
- 【TensorFlow】TensorFlow从浅入深系列之三 -- 教你如何对MNIST手写识别
- 计算机视觉论文-2021-06-11
- 计算机主机系统总线,全国2009年10月高等教育自学考试计算机应用基础试题及答案...
- NOIP2010-普及组初赛C语言解析
- U盘做启动盘之后容量变小
- AcWing 851. spfa求最短路(解决负边权最短路)
- python数据挖掘介绍
- selenium如何添加新标签页
- sucess==happiness
- JAVA计算机毕业设计政府会议管理系统Mybatis+系统+数据库+调试部署
- vue实现导入表格数据【纯前端实现】
- ORACLE EBS常用表查询语句
- MobileNet相关知识整理
- Door to Door 美国电影 《永不放弃》