郑州网建 - Html_Css

解决Web移动端Fixed布局的方案（防止页面露底、overflow-scrolling、iOS下的 Fixed + Input BUG现象、isScroll.js）

raodaor@163.com (raodaor) — Tue, 24 May 2016 16:00:23 +0800

一些细节处理

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

有时候输入框 focus 以后，会出现软键盘遮挡输入框的情况，这时候可以尝试 input 元素的 scrollIntoView 进行修复。
在 iOS 下使用第三方输入法时，输入法在唤起经常会盖住输入框，只有在输入了一条文字后，输入框才会浮出。目前也不知道有什么好的办法能让唤起输入框时正确显示。这暂时算是 iOS 下的一个坑吧。
有些第三方浏览器底部的工具栏是浮在页面之上的，因此底部 fixed 定位会被工具栏遮挡。解决办法也比较简单粗暴——适配不同的浏览器，调整 fixed 元素距离底部的距离。
最好将 header 和 footer 元素的 touchmove 事件禁止，以防止滚动在上面触发了部分浏览器全屏模式切换，而导致顶部地址栏和底部工具栏遮挡住 header 和 footer 元素。
在页面滚动到上下边缘的时候，如果继续拖拽会将整个 View 一起拖拽走，导致页面的“露底”。

fixed定位

为了防止页面露底，可以在页面拖拽到边缘的时候，通过判断拖拽方向以及是否为边缘来阻止 touchmove 事件，防止页面继续拖拽。

以上面内滚动 layout-scroll-fixed 布局为例，给出一段代码作为参考：

// 防止内容区域滚到底后引起页面整体的滚动
var content = document.querySelector('main');
var startY;
content.addEventListener('touchstart', function (e) {
    startY = e.touches[0].clientY;
});

content.addEventListener('touchmove', function (e) {
    // 高位表示向上滚动
    // 底位表示向下滚动
    // 1容许 0禁止
    var status = '11';
    var ele = this;

    var currentY = e.touches[0].clientY;

    if (ele.scrollTop === 0) {
        // 如果内容小于容器则同时禁止上下滚动
        status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01';
    } else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) {
       // 已经滚到底部了只能向上滚动
       status = '10';
    } 

    if (status != '11') {
        // 判断当前的滚动方向
        var direction = currentY - startY > 0 ? '10' : '01';
        // 操作方向和当前允许状态求与运算，运算结果为0，就说明不允许该方向滚动，则禁止默认事件，阻止滚动
        if (!(parseInt(status, 2) & parseInt(direction, 2))) {
            stopEvent(e);
        }
    }
});

移动端业务开发，iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。但是 fixed 元素在有软键盘唤起的情况下，会出现许多莫名其妙的问题。这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。

iOS下的 Fixed + Input BUG现象

让我们先举个栗子，最直观的说明一下这个 BUG 的现象。常规的 fixed 布局，可能使用如下布局（以下仅示意代码）：

<body class="layout-fixed">
    
    <header>
        
    header>
    
    
    <main>
        
    main>
    
    
    <footer>
        <input type="text" placeholder="Footer..."/>
        <button class="submit">提交button>
    footer>
body>

对应的样式如下：

header, footer, main {
    display: block;
}

header {
    position: fixed;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
}

footer {
    position: fixed;
    height: 34px;
    left: 0;
    right: 0;
    bottom: 0;
}

main {
    margin-top: 50px;
    margin-bottom: 34px;
    height: 2000px
}

然后看起来就是下面这个样子。拖动页面时 header 和 footer 已经定位在了对应的位置，目测没问题了。

fixed定位

但接下来问题就来了！如果底部输入框软键盘被唤起以后，再次滑动页面，就会看到如下图所示：

我们看到 fixed 定位好的元素跟随页面滚动了起来… fixed 属性失效了！

这是为什么呢？简单解释下： > 软键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可以理解为变成了 absolute 定位），所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。

这便是 iOS 上 fixed 元素和输入框的 bug 。其中不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。

虽然 isScroll.js 可以很好的解决 fixed 定位滚动的问题，但是不在万不得已的情况下，我们尽量尝试一下不依赖第三方库的布局方案，以简化实现方式。这里抛砖引玉作为参考。

解决思路：

既然在 iOS 下由于软键盘唤出后，页面 fixed 元素会失效，导致跟随页面一起滚动，那么假如——页面不会过长出现滚动，那么即便 fixed 元素失效，也无法跟随页面滚动，也就不会出现上面的问题了。

那么按照这个思路，如果使 fixed 元素的父级不出现滚动，而将原 body 滚动的区域域移到 main 内部，而 header 和 footer 的样式不变，代码如下：

<body class="layout-scroll-fixed">
    
    <header>
        
    header>
    
    
    <main>
        <div class="content">
        
        div>
    main>
    
    
    <footer>
        <input type="text" placeholder="Footer..."/>
        <button class="submit">提交button>
    footer>
body>

header, footer, main {
    display: block;
}

header {
    position: fixed;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
}

footer {
    position: fixed;
    height: 34px;
    left: 0;
    right: 0;
    bottom: 0;
}

main {
    /* main绝对定位，进行内部滚动 */
    position: absolute;
    top: 50px;
    bottom: 34px;
    /* 使之可以滚动 */
    overflow-y: scroll;
}

main .content {
    height: 2000px;
}

这样再来看一下：

fixed定位

在原始输入法下， fixed 元素可以定位在页面的正确位置。滚动页面时，由于滚动的是 main 内部的 div，因此 footer 没有跟随页面滚动。

上面貌似解决了问题，但是如果在手机上实际测试一下，会发现 main 元素内的滚动非常不流畅，滑动的手指松开后，滚动立刻停止，失去了原本的流畅滚动特性。百度一下弹性滚动的问题，发现在 webkit 中，下面的属性可以恢复弹性滚动。

-webkit-overflow-scrolling: touch;

在 main 元素上加上该属性，嗯，丝般顺滑的感觉又回来了！

main {
    /* main绝对定位，进行内部滚动 */
    position: absolute;
    top: 50px;
    bottom: 34px;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性，可以增加弹性 */
    -webkit-overflow-scrolling: touch;
}

另外，这里的 header 和 footer 使用的是 fixed 定位，如果考虑到更老一些的 iOS 系统不支持 fixed 元素，完全可以把 fixed 替换成 absolute 。测试后效果是一样的。

至此一个不依赖第三方库的 fixed 布局就完成了。

Android 下布局

谈到了 iOS ，也来简单说一下 Android 下的布局吧。

在 Android2.3+ 中，因为不支持 overflow-scrolling ，因此部分浏览器内滚动会有不流畅的卡顿。但是目前发现在 body 上的滚动还是很流畅的，因此使用第一种在 iOS 出现问题的 fixed 定位的布局就可以了。

如果需要考虑 Android2.3 以下系统，因为不支持 fixed 元素，所以依然要需要考虑使用 isScroll.js 来实现内部滚动。

其实在 fixed 和输入框的问题上，基本思路就是： > 由于 fixed 在软键盘唤起后会失效，导致在页面可以滚动时，会跟随页面一起滚动。因此如果页面无法滚动，那么 fixed 元素即使失效，也不会滚动，也就不会出现 bug 了。

所以可以在这个方面去考虑解决问题。

解决&#65279导致页面顶部空白一行方法 UTF-8 + BOM

bubuol@126.com (llmaomi) — Fri, 29 Apr 2016 15:37:01 +0800

模板文件生成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个隐藏字符！

遇到这种问题的解决方法就是用Editplus 2.12版本以上编辑器或者 EmEditor或者 UltraEdit（需要取消‘添加BOM’的相关选项）或者 Dreamweaver（需要取消‘添加BOM’的相关选项）重新保存一下utf-8格式的文档！

响应式布局@media only screen and 设备像素比率（-webkit-min-device-pixel-ratio）

camnpr@163.com (佚名) — Sat, 27 Feb 2016 09:58:49 +0800

常见屏幕参数

设备分辨率设备像素比率
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、页面引用

2、CSS文件里

#header {
    background:url(mdpi/bg.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /*CSS for high-density screens*/
    #header {
        background:url(hdpi/bg.png);
    }
}

@media only screen and

only(限定某种设备)

screen 是媒体类型里的一种

and 被称为关键字，其他关键字还包括 not(排除某种设备)

/* 常用类型 */
类型解释
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示，比如幻灯
screen 彩色电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体，比如电传打字机
tv 电视

screen一般用的比较多，下面是我自己的尝试，列出常用的设备的尺寸，然后给页面分了几个尺寸的版本。

/* 常用设备 */
设备屏幕尺寸
显示器 1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960

两种方式

意思是当屏幕的宽度大于600小于800时，应用styleB.css

b@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/

  .class {    background: #ccc;  }}

device-aspect-ratio

device-aspect-ratio可以用来适配特定屏幕长宽比的设备，这也是一个很有用的属性，比如，我们的页面想要对长宽比为4:3的普通屏幕定义一种样式，然后对于16:9和16:10的宽屏，定义另一种样式，比如自适应宽度和固定宽度：

@media only screen and (device-aspect-ratio:4/3)

-webkit-min-device-pixel-ratio的常见值对比（是设备上物理像素和设备独立像素，设备像素比率）

设备	分辨率	设备像素比率
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

-webkit-min-device-pixel-ratio: 1.0

所有非 Retina 的 Mac
所有非 Retina 的 iOS 设备
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S
其他设备

-webkit-min-device-pixel-ratio为1.3

Google Nexus 7

-webkit-min-device-pixel-ratio为1.5

Google Nexus S
Samsung Galaxy S II
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation

-webkit-min-device-pixel-ratio为2.0

iPhone 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
所有Retina displays 的MAC
Google Galaxy Nexus
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
HTC One X

-webkit-min-device-pixel-ratio: 3.0

1.HTC Butterfly
2.Sony Xperia S

(min-resolution:144dpi)
（分辨率）

使用于：位图媒体类型,接受max/min前缀：

“resolution”媒体特性描述输出设备的分辨率，例如，像素密度。若查询设备的非方形像素，在“min-resolution”查询中指定的值必须与最稀疏尺寸进行比较，在“max-resolution”查询中必须与最密集尺寸进行比较。对于“resolution”（没有“min-”或“max-”前缀）查询从不查询设备的非方形像素。

对于印刷机，相当于分辨率（任意颜色的绘制点的分辨率）。

举例说明：该媒体查询表示样式表适用于分辨率大于每英寸144点的设备：@media print and (min-resolution: 144dpi) { … }

汇总30条移动Web开发技巧【看过都觉得：老有用了】

camnpr@163.com (佚名) — Thu, 29 Oct 2015 10:49:51 +0800

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.瀑布流框架

META相关

1. 添加到主屏后的标题（IOS）

2. 启用 WebApp 全屏模式（IOS）

当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）

3. 百度禁止转码

通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：

百度SiteApp转码声明

4. 设置状态栏的背景颜色（IOS）

设置状态栏的背景颜色，只有在 "apple-mobile-web-app-capable" content="yes" 时生效

content 参数：

default ：状态栏背景是白色。
black ：状态栏背景是黑色。
black-translucent ：状态栏背景是半透明。如果设置为 default 或 black ,网页内容从状态栏底部开始。如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

5. 移动端手机号码识别（IOS）

在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

7位数字，形如：1234567
带括号及加号的数字，形如：(+86)123456789
双连接线的数字，形如：00-00-00111
11位数字，形如：13800138000

可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别：

开启电话功能

开启短信功能：

6. 移动端邮箱识别（Android）

与电话号码的识别一样，在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的meta来管别邮箱的自动识别：

同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：

dooyoe@gmail.com

7. 添加智能 App 广告条 Smart App Banner（IOS 6+ Safari）

8. IOS Web app启动动画

由于iPad 的启动画面是不包括状态栏区域的。所以启动图片需要减去状态栏区域所对应的方向上的20px大小，相应地在retina设备上要减去40px的大小

（landscape：横屏 | portrait：竖屏）

9. 添加到主屏后的APP图标

指定web app添加到主屏后的图标路径，有两种略微不同的方式：

* apple-touch-icon：在IOS6及以下的版本会自动为图标添加一层高光效果（IOS7开始已使用扁平化的设计风格） * apple-touch-icon-precomposed：使用“设计原图图标”

效果：

图标尺寸：

可通过指定size属性来为不同的设备提供不同的图标（但通常来说，我们只需提供一个114 x 114 pixels大小的图标即可）

官方说明如下

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.For iPhone and iPod touch both of these sizes are required:57 x 57 pixels114 x 114 pixels (high resolution)For iPad, both of these sizes are required:72 x 72 pixels144 x 144 (high resolution)

10. 优先使用最新版本 IE 和 Chrome

11.viewport模板










标题


这里开始内容

常见问题

1、移动端如何定义字体font-family

三大手机系统的字体：

ios 系统

默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体

android 系统

默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体

winphone 系统

默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体

各个手机系统有自己的默认字体，且都不支持微软雅黑如无特殊需求，手机端无需定义中文字体，使用系统默认英文字体和数字字体可使用 Helvetica ，三种系统都支持

/* 移动端定义字体的代码 */
body{font-family:Helvetica;}

2、移动端字体单位font-size选择px还是rem

对于只需要适配手机设备，使用px即可

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

rem配置参考：

html {font-size:10px}
@media screen and (min-width:480px) and (max-width:639px) {    
    html {
        font-size: 15px
    }
}
@media screen and (min-width:640px) and (max-width:719px) {
    html {
        font-size: 20px
    }
}
@media screen and (min-width:720px) and (max-width:749px) {
    html {
        font-size: 22.5px
    }
}
@media screen and (min-width:750px) and (max-width:799px) {
    html {
        font-size: 23.5px
    }
}
@media screen and (min-width:800px) and (max-width:959px) {
    html {
        font-size: 25px
    }
}
@media screen and (min-width:960px) and (max-width:1079px) {
    html {
        font-size: 30px
    }
}
@media screen and (min-width:1080px) {
    html {
        font-size: 32px
    }
}

3、移动端touch事件(区分webkit 和 winphone)

当用户手指放在移动设备在屏幕上滑动会触发的touch事件

以下支持webkit

touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

以下支持winphone 8

MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动
MSPointerUp——当手指离开屏幕时触发

4、移动端click屏幕产生200-300 ms的延迟响应

移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。

以下是历史原因：

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

解决方案：

fastclick可以解决在手机上点击事件的300ms延迟
zepto的touch模块，tap事件也是为了解决在click的延迟问题

触摸事件的响应顺序

1、ontouchstart 
2、ontouchmove 
3、ontouchend 
4、onclick

解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应

5、什么是Retina 显示屏，带来了什么问题

retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍

那么，前端的应对方案是：

设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2


//例如图片宽高为：200px*200px，那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

.css{font-size:20px}

6、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩

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

7、部分android系统中元素被点击时产生的边框怎么去掉

android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果

a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0;)
    -webkit-user-modify:read-write-plaintext-only;
 }

-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符

另外，有些机型去除不了，如小米2

对于按钮类还有个办法，不使用a或者input标签，直接用div标签

8、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

9、webkit表单元素的默认外观怎么重置

.css{-webkit-appearance:none;}

10、webkit表单输入框placeholder的颜色值能改变么

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

11、webkit表单输入框placeholder的文字能换行么

ios可以，android不行~

12. 关闭iOS键盘首字母自动大写

在iOS中，默认情况下键盘是开启首字母大写的功能的，如果启用这个功能，可以这样：

13. 关闭iOS输入自动修正

和英文输入默认自动首字母大写那样，IOS还做了一个功能，默认输入法会开启自动修正输入内容，这样的话，用户经常要操作两次。如果不希望开启此功能，我们可以通过input标签属性来关闭掉：

14. 禁止文本缩放

当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：

html {
　　      -webkit-text-size-adjust: 100%;
}

需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置 ‘meta viewport’。

15. 移动端如何清除输入框内阴影

在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

input,textarea {
　　border: 0; /* 方法1 */
　　-webkit-appearance: none; /* 方法2 */
}

16. 快速回弹滚动

我们先来看看回弹滚动在手机浏览器发展的历史：

早期的时候，移动端的浏览器都不支持非body元素的滚动条，所以一般都借助 iScroll;
Android 3.0/iOS解决了非body元素的滚动问题，但滚动条不可见，同时iOS上只能通过2个手指进行滚动；
Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性又被移除；
iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果

在iOS上如果你想让一个元素拥有像 Native 的滚动效果，你可以这样做：

    .xxx {
        overflow: auto; /* auto | scroll */
        -webkit-overflow-scrolling: touch;
    }

PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址：

iDangero

17. 移动端禁止选中内容

如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：

.user-select-none {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all （移动端不需要） */
  -ms-user-select: none;      /* IE 10+ */      }

18. 移动端取消touch高亮效果

在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止：

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。

19. 如何禁止保存或拷贝图像（IOS）

通常当你在手机或者pad上长按图像 img ，会弹出选项存储图像或者拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：

img {
 -webkit-touch-callout: none;
 }

20.模拟按钮hover效果

移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下，













按钮

兼容性ios5+、部分android 4+、winphone 8

要做到全兼容的办法，可通过绑定ontouchstart和ontouchend来控制按钮的类名













按钮

21.屏幕旋转的事件和样式

事件

window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

window.onorientationchange = function(){
            switch(window.orientation){
                case -90:
                case 90:
                alert("横屏:" + window.orientation);
                case 0:
                case 180:
                alert("竖屏:" + window.orientation);
                break;
            }
}

样式


//竖屏时使用的样式
@media all and (orientation:portrait) {
    .css{}
}
//横屏时使用的样式
@media all and (orientation:landscape) {
    .css{}
}

22.audio元素和video元素在ios和andriod中无法自动播放

应对方案：触屏即播

$('html').one('touchstart',function(){
    audio.play()
})

23.摇一摇功能

HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

24.手机拍照和上传图片

的accept 属性

使用总结：

ios 有拍照、录像、选取本地图片功能
部分android只有选取本地图片功能
winphone不支持
input控件默认外观丑陋

25. 消除transition闪屏

.css{    
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
    -webkit-transform-style: preserve-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);
}

设计高性能CSS3动画的几个要素

尽可能地使用合成属性transform和opacity来设计CSS3动画，
不使用position的left和top来定位
利用translate3D开启GPU加速

26. android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

框架

1. 移动端基础框架

zepto.js 语法与jquery几乎一样，会jquery基本会zepto~
iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~
underscore.js 该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。
fastclick 加快移动端点击响应时间
animate.css CSS3动画效果库

2. 滑屏框架

适合上下滑屏、左右滑屏等滑屏切换页面的效果

3.瀑布流框架

masonry

工具推荐

caniuse 各浏览器支持html5属性查询
paletton 调色搭配

查看链接

阻止缩放

缺省的多点触摸设置不是特别的好用，因为你的滑动和手势往往与浏览器的行为有关联，比如说滚动和缩放。

要禁用缩放功能的话，使用下面的元标记设置你的视图区（viewport），这样其对于用户来说就是不可伸缩的了：

content="width=device-width, initial-scale=1.0, user-scalable=no">

看看这篇关于移动HTML 5 的文章，了解更多关于视图区设置的信息。

阻止滚动

一些移动设备有缺省的touchmove行为，比如说经典的iOS overscroll效果，当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱，但要禁用它很容易。

document.body.addEventListener('touchmove', function(event) { 
    event.preventDefault(); 
}, false);

细心渲染

如果你正在编写的多点触控应用涉及了复杂的多指手势的话，要小心地考虑如何响应触摸事件，因为一次要处理这么多的事情。考虑一下前面一节中的在屏幕上画出所有触点的例子，你可以在有触摸输入的时候就立刻进行绘制：

canvas.addEventListener('touchmove', function(event) { 
    renderTouches(event.touches); 
},

不过这一技术并不是要随着屏幕上的手指个数的增多而扩充，替代做法是，可以跟踪所有的手指，然后在一个循环中做渲染，这样可获得更好的性能：

var touches = [] 
canvas.addEventListener('touchmove', function(event) { 
    touches = event.touches; 
}, false); 

// 设置一个每秒60帧的定时器 
timer = setInterval(function() { 
    renderTouches(touches); 
}, 15);

提示：setInterval不太适合于动画，因为它没有考虑到浏览器自己的渲染循环。现代的桌面浏览器提供了requestAnimationFrame这一函数，基于性能和电池工作时间原因，这是一个更好的选择。一但浏览器提供了对该函数的支持，那将是首选的处理事情的方式。

使用targetTouches和changedTouches

要记住的一点是，event.touches是与屏幕接触的所有手指的一个数组，而不仅是位于目标DOM元素上的那些。你可能会发现使用 event.targetTouches和event.changedTouches来代替event.touches更有用一些。

最后一点，因为你是在为移动设备做开发，因此你应该要留心移动的最佳做法，这些在Eric Bidelman的文章中有论及，以及要了解这一W3C文档。

详解：CSS3 响应式布局 Media Queries 媒体查询

camnpr@163.com (佚名) — Fri, 25 Sep 2015 10:44:50 +0800

css3 响应式布局定义

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

响应不同的设备

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

Media Queries 用法如下:

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

上面都直接在引用的 css 文件引用中使用 media 标识

media 标识是什么

通常来讲,media 是指设备类型 media_type 对应的有下面几种

- all 所有设备
- aural 听觉设备
- braille 点字触觉设备
- handled 便携设备,如手机,平板电脑
- print 打印预览图等
- projection 投影设备
- screen 显示器,笔记本,移动端等设备
- tty 如打字机或终端等设备
- tv 电视机等设备
- embossed 盲文打印机

所以,我们在上面的 style 文件中定义了 media_type="screen"

就是指当你的设备是显示器,笔记本,移动端的时候,加载此 css 样式文件

Media Queries 的另外一种用法:

在样式定义时,指定 Media type 类型

@media screen and (max-width:1024px){
    .background {
        background:#fff;
    }
}

上面的样式定义前使用 @media 属性来指定 media_type 是 screen

这里注意,除了限制在 screen 设备上使用,后面还有 and 字符连接了一个宽度限制

我们就来谈谈Media Queries 的响应式设计

上面的示例 css 定义提到了 and (max-width:1024px)

这是什么意思呢? 当屏幕宽度小于 1024px 时, blackground 类的样式发生变化,背景色变成 #fff ;

是不是很神奇,没错 media 可以可以确定当前媒体环境的变化情况,根据你的媒体宽度来动态加载不同的样式,达到响应式布局.

那么问题来了,如果根据不同的媒体或者媒体的不同分比率(水平宽度) 能不能加载不同的css 文件呢?
当然可以

我们可以这样引用 css 文件

上面的定义告诉我们,当媒体是电脑,笔记本,移动设备屏幕时,并且水平宽度大于 800px 就加载使用 main.css 样式文件

另外 media 属性还支持其他关键词 ,比如 not ,only

not: 表示当前媒体排除指定的设备 @media not print

上面定义的样式排除打印机

only: 用来指定特定的设备 @media only screen

上面定义告诉我们这个样式只支持台式机,笔记本,移动设备屏幕

input type="file"在vivo手机上，弹出选项里有一个关闭的叉，点击后，背景的蒙层还显示

camnpr@163.com (佚名) — Wed, 23 Sep 2015 11:54:56 +0800

如下代码：

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

如图：

看到这个，无从下手，百度搜索（一个公司如果连google也访问不了，那也是够了），也没有相关信息可用。

首先，我们解决的思路可以是，如果大公司的网站也有这个问题，那么可以告诉测试人员，这个问题，目前还没有解决方案。

于是，我用vivo手机访问了百度图片（http://image.baidu.com/search/wiseindex?tn=wiseindex）也有上传图片的，经过测试，没有这个问题。

那么该如何解决呢？

分析一下百度图片的上传方式？

如何禁止浏览器系统默认样式？-webkit-appearance ios默认Safari

kuabaobao_com@163.com (kuabaobao) — Thu, 27 Aug 2015 10:52:10 +0800

在开发移动设备Html5页面时,有没有遇到过,你设置的样式,在ios 设备里面面目全非了.

尤其是和安卓设备对比后,会让你有种不相信css 的感觉.

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

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

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

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

input[type="submit"],  
input[type="reset"],  
input[type="button"],  
button {  
-webkit-appearance: none;  
}

使用上面的定义,可以改变webkit 内核浏览器的默认样式.

移动H5前端性能优化指南

kuabaobao_com@163.com (kuabaobao) — Sat, 22 Aug 2015 10:54:18 +0800

移动H5前端性能优化指南

概述

1. PC优化手段在Mobile侧同样适用
2. 在Mobile侧我们提出三秒种渲染完成首屏指标
3. 基于第二点，首屏加载3秒完成或使用Loading
4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB
5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点
6. 基于第五点，要合理处理代码减少渲染损耗
7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置
8. 加载完成后用户交互使用时也需注意性能
优化指南

[加载优化]

加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点

· 减少HTTP请求
因为手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），所以要尽量减少页面的请求数，首次加载同时请求数不能超过4个
a) 合并CSS、JavaScript
b) 合并小图片，使用雪碧图

· 缓存
使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳）
a) 缓存一切可缓存的资源
b) 使用长Cache（使用时间戳更新Cache）
c) 使用外联式引用CSS、JavaScript

· 压缩HTML、CSS、JavaScript
减少资源大小可以加快网页显示速度，所以要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip
a) 压缩（例如，多余的空格、换行符和缩进）
b) 启用GZip

· 无阻塞
写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾

部或使用异步方式加载

· 使用首屏加载
首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化

· 按需加载
将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量
PS：按需加载会导致大量重绘，影响渲染性能
a) LazyLoad
b) 滚屏加载
c) 通过Media Query加载

· 预加载
大型重资源页面（如游戏）可使用增加Loading的方法，资源加载完成后再显示页面。但Loading时间过长，会造成用户流失
对用户行为分析，可以在当前页加载下一页资源，提升速度
a) 可感知Loading(如进入空间游戏的Loading)
b) 不可感知的Loading（如提前加载下一页）

· 压缩图片
图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示
PS：过度压缩图片大小影响图片显示效果
a) 使用智图（ http://zhitu.tencent.com/ ）
b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
c) 使用Srcset
d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)
e) 选择合适的大小（1. 首次加载不大于1014KB 2. 不宽于640（基于手机屏幕一般宽度））

· 减少Cookie
Cookie会影响加载速度，所以静态资源域名不使用Cookie

· 避免重定向
重定向会影响加载速度，所以在服务器正确设置避免重定向

· 异步加载第三方资源
第三方资源不可控会影响页面的加载和显示，因此要异步加载第三方资源

[脚本执行优化]

脚本处理不当会阻塞页面加载、渲染，因此在使用时需当注意

· CSS写在头部，JavaScript写在尾部或异步

· 避免图片和iFrame等的空Src
空Src会重新加载当前页面，影响速度和效率

· 尽量避免重设图片大小
重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能

· 图片尽量避免使用DataURL
DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长

[CSS优化]

· 尽量避免写在HTML标签中写Style属性

· 避免CSS表达式
CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式

· 移除空的CSS规则
空的CSS规则增加了CSS文件的大小，且影响CSS树的执行，所以需移除空的CSS规则

· 正确使用Display的属性
Display属性会影响页面的渲染，因此请合理使用
a) display:inline后不应该再使用width、height、margin、padding以及float
b) display:inline-block后不应该再使用float
c) display:block后不应该再使用vertical-align
d) display:table-*后不应该再使用margin或者float

· 不滥用Float
Float在渲染时计算量比较大，尽量减少使用

· 不滥用Web字体
Web字体需要下载，解析，重绘当前页面，尽量减少使用

· 不声明过多的Font-size
过多的Font-size引发CSS树的效率

· 值为0时不需要任何单位
为了浏览器的兼容性和性能，值为0时不要带单位

· 标准化各种浏览器前缀
a) 无前缀应放在最后
b) CSS动画只用（-webkit- 无前缀）两种即可
c) 其它前缀为 -webkit- -moz- -ms- 无前缀四种，（-o-Opera浏览器改用blink内核，所以淘汰）

· 避免让选择符看起来像正则表达式
高级选择器执行耗时长且不易读懂，避免使用

[JavaScript执行优化]

· 减少重绘和回流
a) 避免不必要的Dom操作
b) 尽量改变Class而不是Style，使用classList代替className
c) 避免使用document.write
d) 减少drawImage

· 缓存Dom选择与计算
每次Dom选择都要计算，缓存他

· 缓存列表.length
每次.length都要计算，用一个变量保存这个值

· 尽量使用事件代理，避免批量绑定事件

· 尽量使用ID选择器
ID选择器是最快的

· TOUCH事件优化
使用touchstart、touchend代替click，因快影响速度快。但应注意Touch响应过快，易引发误操作

[渲染优化]

· HTML使用Viewport
Viewport可以加速页面的渲染，请使用以下代码

· 减少Dom节点
Dom节点太多影响页面的渲染，应尽量减少Dom节点

· 动画优化
a) 尽量使用CSS3动画
b) 合理使用requestAnimationFrame动画代替setTimeout
c) 适当使用Canvas动画 5个元素以内使用css动画，5个以上使用Canvas动画（iOS8可使用webGL）

· 高频事件优化
Touchmove、Scroll 事件可导致多次渲染
a) 使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染
b) 增加响应变化的时间间隔，减少重绘次数

· GPU加速
CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用
PS：过渡使用会引发手机过耗电增加

参考资料

出处：腾讯ISUX (http://isux.tencent.com/h5-performance.html)

详解css3 pointer-events（阻止hover、active、onclick等触发事件来防止按钮重复点击）

camnpr@163.com (佚名) — Thu, 06 Aug 2015 10:31:47 +0800

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

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

实际代码使用中案例：

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

2、一些层的绝对定位，覆盖按钮，穿透可以点击它。等等。

来看下具体用法：

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

pointer-events属性有很多值，但是对于浏览器来说，只有auto和non两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

@郑州网建

pointer-events属性值详解

auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。
其它属性值为SVG专用，这里不再多介绍了。

浏览器兼容性

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持（IE11又支持，不过很好的一点是在ie中给a加disabled 点击事件自动无效。），Opera在SVG中支持。但是该属性HTML中不支持。

用meta name="renderer" content="webkit|ie-comp|ie-stand"来切换360双核安全浏览器的极速模式和兼容模式

camnpr@163.com (佚名) — Fri, 31 Jul 2015 10:29:53 +0800

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

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

浏览模式

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

表示极速模式

表示兼容模式

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

360极速浏览器会自动为您选择使用适合每个网站的浏览模式。所以，通常您不用了解几种内核的区别。

几种模式各有什么特点

极速模式下，网站打开速度快，但某些网站在极速模式下可能出现兼容性问题，显示不正常。
兼容模式下，网站打开速度比极速模式略低，但网页兼容性问题较少。
IE9/IE10模式下，网站会使用IE9/IE10的渲染方式渲染，支持硬件加速及IE9/IE10全新的脚本渲染引擎。

切换浏览模式时，360极速浏览器将会自动同步双核间的数据，让您在双核间能无缝切换。

用户体验计划

在您加入用户体验计划的情况下，我们会将切换的网址发送到360网站，以便我们完善兼容列表库，改进产品。

上传的数据不包含具有您个体特征的信息，且不会泄漏给第三方个人或机构。

若不希望上传切换的网址，您只需在“高级选项”里去掉勾选
“ 将使用情况统计信息和崩溃报告自动发送给360极速浏览器网站，帮助我们完善360极速浏览器”即可。

背景介绍

由于众所周知的情况，国内的主流浏览器都是双核浏览器：基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360的几款浏览器为例，我们优先通过Webkit内核渲染主流的网站，只有小量的网站通过IE内核渲染，以保证页面兼容。在过去很长一段时间里，我们主要的控制手段是一个几百k大小网址库，一个通过长期人工运营收集的网址库。

尽管我们努力通过用户反馈、代码标签智能判断技术提高浏览器的自动切核准确率。但是在很多情况下，我们仍然无法达到百份百正确。因此，我们新增加了一个控制手段：内核控制Meta标签。只要你在自己的网站里增加一个Meta标签，告诉360浏览器这个网址应该用哪个内核渲染，哪么360浏览器就会在读取到这个标签后，立即切换对应的内核。并将这个行为应用于这个二级域名下所有网址。
目前该功能已经在所有的360安全浏览器实现。我们也建议其它浏览器厂商一起支持这个实现。让这个控制标签成为行业标准。

代码示例

在head标签中添加一行代码：

content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。
若页面需默认用极速核，增加标签：
若页面需默认用ie兼容内核，增加标签：
若页面需默认用ie标准内核，增加标签：

注意：引号要英文状态下的，直接复制代码后看一下格式对不对，请自行更正。

各渲染内核的技术细节

内核	Webkit	IE兼容	IE标准
文档模式	Chrome 21	IE6/7	IE9/IE10/IE11(取决于用户的IE)
HTML5支持	YES	NO	YES
ActiveX控件支持	NO	YES	YES

各内核UA示例

备注

这个功能其实和IE9的X-UA-Compatible很类似，关于IE几个内核的实现介绍，请看：

指定IE的文档兼容模式 meta X-UA-Compatible EmulateIE7

meta http-equiv="X-UA-Compatible" content="IE=7"

IE=EmulateIE7 标签的作用

http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx

了解极速模式和兼容模式使用的技术：
极速模式使用的是Webkit内核，Webkit内核是全球最快速的浏览器内核，同时支持了诸多的网页新标准，
但由于Webkit内核较新，国内一些网站尚未较好地支持此内核。
兼容模式使用的是IE浏览器所使用的 Trident 内核，是国内网页制作时主要兼容的浏览器内核，兼容性问题较少。
IE9/IE10模式使用的是IE9/IE10浏览器所使用的新内核，加入了硬件加速、全新的脚本渲染引擎，更标准的HMTL5及CSS3支持。

郑州网建 - Html_Css

解决Web移动端Fixed布局的方案（防止页面露底、overflow-scrolling、iOS下的 Fixed + Input BUG现象、isScroll.js）

一些细节处理

iOS下的 Fixed + Input BUG现象

解决思路：

Android 下布局

解决&#65279导致页面顶部空白一行方法 UTF-8 + BOM

响应式布局@media only screen and 设备像素比率（-webkit-min-device-pixel-ratio）

常见屏幕参数

device-aspect-ratio

汇总30条移动Web开发技巧【看过都觉得：老有用了】

META相关

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.瀑布流框架

工具推荐

阻止缩放

阻止滚动

细心渲染

使用targetTouches和changedTouches

详解：CSS3 响应式布局 Media Queries 媒体查询

css3 响应式布局定义

响应不同的设备

Media Queries 用法如下:

media 标识是什么

Media Queries 的另外一种用法:

这里注意,除了限制在 screen 设备上使用,后面还有 and 字符 连接了一个宽度限制

我们就来谈谈Media Queries 的响应式设计

这是什么意思呢? 当屏幕宽度小于 1024px 时, blackground 类的样式发生变化,背景色变成 #fff ;

另外 media 属性还支持其他关键词 ,比如 not ,only

input type="file"在vivo手机上，弹出选项里有一个关闭的叉，点击后，背景的蒙层还显示

如何禁止浏览器系统默认样式？-webkit-appearance ios默认Safari

移动H5前端性能优化指南

移动H5前端性能优化指南

[加载优化]

[脚本执行优化]

[CSS优化]

[JavaScript执行优化]

[渲染优化]

详解css3 pointer-events（阻止hover、active、onclick等触发事件来防止按钮重复点击）

pointer-events属性值详解

这里注意,除了限制在 screen 设备上使用,后面还有 and 字符连接了一个宽度限制