chanong 设置状态栏背景颜色，仅当“apple--web-app-”=“yes”时有效
范围：
：状态栏背景为白色。
黑色：状态栏背景为黑色。
black-：状态栏背景为半透明。 如果设置为或黑色，网页内容从状态栏底部开始。 如果设置为black-，网页内容会充满整个屏幕，顶部会被状态栏遮挡。
5.手机号码识别（IOS）
在 iOS（而非其他浏览器）上，看起来像电话号码的数字被视为电话链接，例如：
7 位数字，格式为：
带括号和加号的数字，例如：(+86)
双连接线的编号，形式：00-00-00111
11 位数字，格式为：
可能还有其他类型的数字也可以被识别。 我们可以通过以下元数据关闭电话号码的自动识别：
打开电话功能
开启短信功能：
6.手机邮箱识别（）
就像识别电话号码一样，符合电子邮件格式的字符串在上也会被识别。 我们可以使用以下元来管理电子邮件地址的自动识别：
同样，我们也可以通过label属性启用长按邮箱地址弹出邮件发送功能的功能：
7.添加智能App广告横幅Smart App（IOS 6+）
8.IOS Web应用程序启动动画
由于iPad启动画面不包含状态栏区域，因此启动图片需要在状态栏区域对应方向的尺寸中减去20px，相应的，设备上的尺寸也需要减去40px。
(: 横屏 | : 竖屏)
9.主屏添加APP图标
Web 应用程序添加到主屏幕后指定图标路径有两种略有不同的方法：
* apple-touch-icon：在IOS6及以下版本中，图标会自动添加一层高亮效果（IOS7开始使用扁平化设计风格） * apple-touch-icon-：使用“设计原创图标”
影响：
图标大小：
你可以通过指定size属性为不同的设备提供不同的图标（但一般来说，我们只需要提供尺寸为114 x 114的图标）
官方描述如下
您的应用程序图标的大小。 如果您是一个应用程序，则需要所有四种尺寸的应用程序图标。
对于 iPod touch，这两种尺寸均为：
57×57
114×114（高）
对于 iPad，这两种尺寸均为：
72×72
144×144（高）
10.优先使用最新版本的IE浏览器
11. 模板
从这里开始内容
常见问题
1. 移动端如何定义字体
三大手机系统的字体：
ios系统
默认中文字体为黑体SC
默认的英文字体是
默认数字字体是
没有微软雅黑字体
系统
默认的中文字体是
默认英文和数字字体为 Droid Sans
没有微软雅黑字体
系统
默认中文字体为(方正)
默认英文和数字字体是Segoe
没有微软雅黑字体
每个手机系统都有自己的默认字体，都不支持微软雅黑。 如果没有特殊需要，手机上不需要定义中文字体。 可以使用系统默认的英文字体和数字字体。 三个系统都支持它。
*移动端定义字体的代码*/
正文{字体-:;}
2. 选择px 或rem 作为移动字体单位font-size。
对于只需要适配的移动设备，使用px。
如果需要适配各种移动设备，可以使用rem。 例如，您只需要适应iPad等分辨率差异较大的设备。
rem配置参考：
html {字体大小：10px}
@media 和（最小宽度：480px）和（最大宽度：639px）{
html{
字体大小：15px
@media 和（最小宽度：640px）和（最大宽度：719px）{
html{
字体大小：20px
@media 和（最小宽度：720px）和（最大宽度：749px）{
html{
字体大小：22.5px
@media 和（最小宽度：750px）和（最大宽度：799px）{
html{
字体大小：23.5px
@media 和（最小宽度：800px）和（最大宽度：959px）{
html{
字体大小：25px
@media 和（最小宽度：960px）和（最大宽度：）{
html{
字体大小：30px
@media 和（最小宽度：）{
html{
字体大小：32px
3.手机触摸事件（微分与）
用户将手指放在移动设备上并在屏幕上滑动时触发的触摸事件
支持以下内容
——手指触摸屏幕时发生，无论当前有多少根手指
——手指在屏幕上滑动时持续触发。通常我们滑动页面时，会调用该事件来防止默认情况的发生：阻止页面滚动。
——手指离开屏幕时触发
——当系统停止跟踪触摸时会触发该事件。例如触摸过程中页面突然弹出提示框，就会触发该事件。 该事件相对较少使用。
以下支持8
——手指触摸屏幕时发生，无论当前有多少根手指
——手指在屏幕上滑动时持续触发。通常我们滑动页面时，会调用CSS html{-ms-touch-: none;}来防止默认情况的发生：阻止页面滚动。
——手指离开屏幕时触发
4、手机点击屏幕产生200-300ms的延迟响应。
移动设备上的网页有300ms的延迟，可能会导致按钮点击延迟甚至点击失败。
历史原因如下：
2007年，苹果发布了第一个IOS系统。 为了在手机上更好地展示适合PC大屏的网页，采用了双击缩放（点击缩放）的解决方案。 例如，如果您使用浏览器在PC上打开网页时，您可能会看到页面内容虽然可以占满整个屏幕，但字体和图片却很小，看不清。 这时，你可以快速双击屏幕的某个部分，就可以看清楚了。 该部分放大的内容再次双击后可恢复原状。
双击缩放是指用手指快速点击屏幕两次，iOS内置浏览器会将网页缩放至原始比例。
原因在于浏览器需要如何判断快速点击。 当用户点击屏幕上的某个元素时，比如跳转链接，浏览器会首先捕获这次点击，但浏览器无法判断用户是否只是单纯的点击。 要单击链接，您仍然需要双击该区域才能缩放。 因此，在捕获第一次点击后，浏览器会将其保留一段时间t。 如果用户在t时间间隔内没有点击下一次，浏览器就会做点击跳转链接的处理，如果用户在t时间内第二次点击，浏览器就会禁止跳转，转而进行缩放页面这部分的操作。 那么这个时间间隔t是多长呢？ 在iOS下，大约是300毫秒。 这就是延迟的来源。 这样做的后果是，如果用户只是简单地点击页面，页面就会需要一段时间才能响应，给用户带来缓慢的体验。 对于Web开发者来说，页面js捕获的点击事件的回调函数处理需要300ms才能生效，这间接导致其他业务逻辑的处理受到影响。
解决方案：
可以解决手机点击事件300ms延迟
zepto的触摸模块和tap事件也是为了解决点击延迟问题而设计的
触摸事件的响应顺序
1、
2、
3.
4.
要解决300ms延迟的问题，还可以通过绑定事件来加快对事件的响应速度。
5、什么是显示屏，它会带来哪些问题？
：超高像素密度的液晶屏。 相同尺寸的屏幕上显示的像素数从一个变为多个。 例如，在相同尺寸的屏幕上，苹果设备的显示屏幕从一个像素变为一个像素。 4人份
高清显示器上的位图会被放大，图片会变得模糊，因此移动模型通常设计为传统 PC 的两倍大。
那么，前端响应方案为：
从设计稿中剪出的图片长和宽必须是偶数，并使用-size将图片缩小到原尺寸的1/2。
//比如图片宽高为：200px*200px，那么写法如下
.css{宽度:100px;:100px;-尺寸:100px 100px;}
其他元素的值为原值的1/2。 例如，视觉稿的字体为40px，使用样式的书写方式为20px。
.css{字体大小：20px}
6、iOS系统中如何去除触摸元素时产生的半透明灰色遮罩
当 iOS 用户单击链接时，会出现半透明的灰色蒙版。 如果想禁用它，可以将--tap--color的alpha值设置为0，即将该属性值的最后一位设置为0可以去除半透明。 灰色面具
a,,输入,{--tap--color: rgba(0,0,0,0;)}
7. 如何去除某些系统中点击元素时产生的边框
当用户单击链接时，将出现边框或半透明的灰色蒙版。 不同厂家定义的效果是不同的。 可以将--tap--color的alpha值设置为0，以去除一些机器自带的效果。
一个，，输入，{
--tap--颜色：rgba(0,0,0,0;)
--用户-：只读--仅；
--user- 有一个副作用，就是输入法不能再输入多个字符。
另外，有些机型是无法删除的，比如小米2
按钮类还有另一种方法。 不使用 a 或 input 标签，而是直接使用 div 标签。
8、如何去除系统A中点击输入标签时产生的半透明灰色背景。
9. 如何重置表单元素的默认外观
.css{--:无;}
10、表单输入框的颜色值可以改变吗？
输入::--输入-{颜色:#;}
输入：焦点::--输入-{颜色：#;}
11、表单输入框中的文字可以换行吗？
ios可以，但是不行~
12.关闭iOS键盘上首字母自动大写
在iOS中，默认情况下，键盘具有首字母大写的功能。 如果启用此功能，您可以执行以下操作：
13.关闭iOS输入自动更正
就像英文输入默认自动首字母大写一样，iOS也有默认输入法会自动修正输入内容的功能。 在这种情况下，用户往往需要进行两次操作。 如果我们不想启用这个功能，我们可以通过input标签属性将其关闭：
14.禁用文本缩放
当移动设备在横屏和竖屏之间切换时，文本的大小将被重新计算并相应缩放。 当我们不需要这个时，我们可以选择禁用它：
html{
--文字大小-：100%；
需要注意的是，这个属性在PC端已经被去掉了。 要使该属性在移动端生效，必须设置'meta'。
15.如何清除移动端输入框的阴影
在iOS上，输入框默认有内阴影，但无法使用box-清除。 如果不需要阴影，可以这样关闭：
输入，
{
: 0;
- ： 没有任何;
16.快速回弹滚动
我们先来看看回弹滚动在移动浏览器中的发展历史：
早期，移动浏览器不支持非body元素的滚动条，所以一般依赖；
3.0/iOS解决了非body元素的滚动问题，但是滚动条不可见，并且在iOS上只能用2个手指完成滚动；
4.0解决了不可见滚动条的问题，并增加了快速回弹滚动效果，但该功能后来被删除；
从iOS 5.0开始，滚动条不可见，并增加了快速回弹滚动效果。
在 iOS 上，如果您希望元素具有滚动效果，例如：
.xxx {
： 汽车;
- -： 触碰;
PS：用了之后感觉不太好。 有一些奇怪的错误。 这里推荐另一款。 该插件集成了滑屏滚动的强大功能（支持3D），还内置了滚动条，可以进行回弹滚动。 官方地址：
17. 移动版禁止选择内容
如果你不希望用户能够选择页面上的内容，你可以在css中禁用它：
.user--无{
--用户-：无；
-moz-用户-：无；
-ms-用户-：无；
18.取消移动端触摸高亮效果
在制作移动页面时，你会发现所有a标签在点击触发或者所有元素设置为伪类时默认激活时都会显示一个高亮框：。 如果你不想这种高亮显示，可以使用 css 下面的方法来实现全局禁止：
html{
--tap--颜色: rgba(0, 0, 0, 0);
不过这个方法在三星机上效果不佳。 一种折衷的方法是，将页面中非真实跳转链接的a标签替换为其他标签，可以解决这个问题。
19. 如何禁用保存或复制图像（iOS）
通常当您在手机或pad上长按图像img时，会弹出存储图像或复制图像的选项。 如果您不希望用户这样做，可以通过以下方法禁用：
img { --touch-: 无; }
20.模拟按钮悬停效果
移动终端上触摸按钮的效果可以清楚地向用户表明有事情即将发生，这是更好的体验。 然而，移动设备中没有鼠标指针，使用CSS的hover无法满足我们的需求。 还好国外有css激活功能。 效果如下：
按钮
兼容性ios5+，部分4+，8
要实现完全兼容，可以通过绑定和控制按钮的类名
.btn-blue-on{-颜色：#;}
var = .(".btn-蓝色");
。 = {
这。 =“btn-蓝色 btn-蓝色-on”
。 = {
这。 =“btn-蓝色”
21. 屏幕旋转的事件和样式
事件
.、值：正负90表示横向模式，0和180表示纵向模式；
。 = {
(.){
案例 90：
案例90：
Alert("横屏：" + .);
案例0：
案例180：
Alert("竖屏：" + .);
休息;
风格
//竖屏使用的样式
@media all 和 (:) {
.css{}
//横屏使用的样式
@media all 和 (:) {
22.音频元素和视频元素在ios和ios中无法自动播放
解决方案：在触摸屏上播放
$('html').one('',{
音频播放
})
23.摇一摇功能
HTML5：封装运动传感器数据的事件，可以在手机运动时获取运动加速度等数据。
24.用手机拍照并上传图片
特性
使用总结：
iOS具有拍照、录制视频和选择本地图片的功能。
有的只有选择本地图片的功能
不支持
输入控件默认看起来很难看
25.消除闪屏
.css{
---样式：-3d；
---：；
开启硬件加速
解决页面闪烁问题
确保动画流畅
.css {
--: (0, 0, 0);
-moz-: (0, 0, 0);
-ms-: (0, 0, 0);
: (0, 0, 0);
设计高性能CSS3动画的几个要素
尽可能使用复合属性和 CSS3 动画，
不要使用left和top来定位
用于启用 GPU 加速
26.去掉语音输入按钮
输入::--输入-- {: 无}
框架
1.移动端基本框架
zepto.js的语法几乎是一样的，基本都能看懂zepto~
.js解决了页面不支持弹性滚动和固定带来的问题~实现下拉刷新、滑屏、缩放等功能~
.js 该库为函数式编程提供了一整套有用的函数，但不扩展任何内置对象。
加快移动端点击响应时间
.css CSS3动画效果库
2. 滑屏框架
适合上下左右滑动屏幕切换页面的效果。
slip.js
.js
.js
3.瀑布框架
工具推荐
各浏览器均支持html5属性查询
颜色匹配
干货！免费获取腾讯资深讲师的网页设计教程
点我即可获取
☝☝☝
关注网页设计自学平台，你99%的努力都在这里
微信扫一扫打赏
支付宝扫一扫打赏
