一些细节处理

在细节处理上，其实还有很多要注意的，挑几个实际遇到比较大的问题来说一下：

1. 有时候输入框 focus 以后，会出现软键盘遮挡输入框的情况，这时候可以尝试 input 元素的 scrollIntoView 进行修复。
2. 在 iOS 下使用第三方输入法时，输入法在唤起经常会盖住输入框，只有在输入了一条文字后，输入框才会浮出。目前也不知道有什么好的办法能让唤起输入框时正确显示。这暂时算是 iOS 下的一个坑吧。
...

模板文件生成html文件之后会在body开头处加入一个可见的控制符，导致页面头部会出现一个空白行。原因是页面的编码是UTF-8 + BOM。

这种编码方式一般会在windows操作系统中出现，比如WINDOWS自带的记事本等软件，在保存一个以UTF-8编码的文件时，会在文件开始的地方插入三个不可见的字符（0xEF 0xBB 0xBF，即BOM）。它是一串隐藏的字符，用于让记事本等编辑器识别这个文件是否以UTF-8编码。

对于一般的文件，这样并不会产生什么麻烦。但对于 PHP来说，BOM是个大麻烦。因为PHP并不会忽略BOM，所以在读取、包含或者引用这些文件时，会把BOM作为该文件开头正文的一部分。根据嵌入式语言的特点，这串字符将被直接执行（显示）出来。由此造成即使页面的 top padding 设置为0，也无法让整个网页紧贴浏览器顶部，因为在html一开头有这3个隐藏字符！

常见屏幕参数

• 设备 分辨率 设备像素比率
• Android LDPI 320×240 0.75
• Iphone 3 & Android MDPI 320×480 1
• Android HDPI 480×800 1.5
• Iphone 4 960×640 2.0

iPhone 4的一个 CSS 像素实际上表现为一块 2×2 的像素。所以图片像是被放大2倍一样，模糊不清晰。

解决办法：

1、页面引用

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />

1. 添加到主屏后的标题（IOS）
2. 启用 WebApp 全屏模式（IOS）
3. 百度禁止转码
4. 设置状态栏的背景颜色（IOS）
5. 移动端手机号码识别（IOS）
6. 移动端邮箱识别（Android）
7. 添加智能 App 广告条 Smart App Banner（IOS 6+ Safari）
8. IOS Web app启动动画
9. 添加到主屏后的APP图标
10. 优先使用最新版本 IE 和 Chrome
11.viewport模板
1、移动端如何定义字体font-family
2、移动端字体单位font-size选择px还是rem
3、移动端touch事件(区分webkit 和 winphone)
4、移动端click屏幕产生200-300 ms的延迟响应
5、什么是Retina 显示屏，带来了什么问题
6、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
7、部分android系统中元素被点击时产生的边框怎么去掉
8、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
9、webkit表单元素的默认外观怎么重置
10、webkit表单输入框placeholder的颜色值能改变么
11、webkit表单输入框placeholder的文字能换行么
12. 关闭iOS键盘首字母自动大写
13. 关闭iOS输入自动修正
14. 禁止文本缩放
15. 移动端如何清除输入框内阴影
16. 快速回弹滚动
17. 移动端禁止选中内容
18. 移动端取消touch高亮效果
19. 如何禁止保存或拷贝图像（IOS）
20.模拟按钮hover效果
21.屏幕旋转的事件和样式
22.audio元素和video元素在ios和andriod中无法自动播放
23.摇一摇功能
24.手机拍照和上传图片
25. 消除transition闪屏
26. android 上去掉语音输入按钮
1. 移动端基础框架
2. 滑屏框架
3.瀑布流框架

css3 响应式布局定义

响应式:就是根据不同设备,或者设备不同分辨率,动态给出对应的样式变化

响应不同的设备

涉及到 css 中的 Media Queries ,这个词组被译为 “媒体查询”

Media Queries 用法如下:

<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />

或者另外一种引入css 文件的方法

<style type="text/css" media="screen">
   @import url("css/style.css");
 </style>

如下代码：

<form>
<input type="file" accept="image/*" />
</form>

在vivo手机上，弹出选项。有一个关闭的叉。 当点击这个叉后，背景的蒙层还显示，怎么解决？

如图：

其实在 ios设备中使用 Safari 浏览器时.

你页面里面的 input ,button ,submit ,reset 等元素都会被载入系统默认的css 来控制.

那么问题来了,如果默认禁止浏览器载入这些默认样式呢?

在你的css 样式中引入如下:

pointer-events更像是JavaScript，它能够：

• 阻止用户的点击动作产生任何效果
• 阻止缺省鼠标指针的显示
• 阻止CSS里的hover和active状态的变化触发事件
• 阻止JavaScript点击动作触发的事件

实际代码使用中案例：

1、提交页面，提交按钮点击后，添加这个样式属性（style="pointer-events"），来防止重复提交。 @camnpr

我开发了一个网站，大量采用了html5和css3，希望用户都以webkit内核打开页面，但是测试却发现360的以ie内核打开为推荐模式，不知原因为何。其实360给网站开发者设计了一种选择的方法，只要加入一段Meta标签代码就可以解决。

以下信息摘自360官方网站：

浏览模式

极速模式、兼容模式及IE9高速模式是360浏览器显示网页时使用的三种模式：

表示极速模式

表示兼容模式

表示IE9/IE10模式（仅在安装了IE9或IE10后可用）