常见屏幕参数

• 设备 分辨率 设备像素比率
• 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.瀑布流框架

HTML5Shiv主要解决HTML5提出的新的元素不被IE6-8识别。

Respond.js 是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计（Responsive Web Design）。

Modernizr 是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。

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>

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

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

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

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

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

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

实际代码使用中案例：

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

a,input等元素在android原生浏览器下获得焦点时，元素外围会出现一个橙色的高亮边框（如下图）。

若要去除它，通常的办法是：

a:focus,input:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); }

近日，用到一些 CSS3 的属性制作其效果。

一直用这个网站在线生成css3的按钮（button），http://www.bestcssbuttongenerator.com/

又发现了一个PS的插件，如下：

Photoshop效果 转CSS3 小插件：

个人使用体验：1、生成的效果和PS效果非常接近，也许比自己写的逼真 2、代码较为简洁基本能直接使用       3、图层效果合并越少生成出的效果越好         4、精简版PS也能直接使用

使用方法：

        国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？

简单的说：

px是：相对长度单位。像素（Pixels）。1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

em是：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

rem是：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。比如：我们定义如下，那么相对的font-size就是不同屏幕宽度的font-size，从而达到适配

text-overflow是一个常用的CSS属性，作用是让文本超出容器区域的部分以省略号显示。

要让它生效， 还需要配合设置其它几个css属性。示例CSS代码：

p { 
     white-space: nowrap; 
     width: 100%; /* IE6 needs any width */ 
     overflow: hidden; /* "overflow" value must be different from "visible" */ 
     -o-text-overflow: ellipsis; /* Opera 9-10 */ 
     text-overflow: ellipsis; /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */ 
}