http://blog.vudiy.com/667.html
点击与click事件
对于a标记的点击导航，默认是在onclick事件中处理的。而移动客户端对onclick的响应相比PC浏览器有着明显的几百毫秒延迟。
在移动浏览器中对触摸事件的响应顺序应当是：
|
1
|
ontouchstart -> ontouchmove -> ontouchend -> onclick
|
因此，如果确实要加快对点击事件的响应，就应当绑定ontouchend事件。
使用click会出现绑定点击区域闪一下的情况，解决：给该元素一个样式如下
|
1
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
如果不使用click，也不能简单的用touchstart或touchend替代，需要用touchstart的模拟一个click事件，并且不能发生touchmove事件，或者用zepto中的tap（轻击）事件。
|
1
|
body { -webkit-overflow-scrolling: touch; }
|
用iphone或ipad浏览很长的网页滚动时的滑动效果很不错吧？不过如果是一个div，然后设置height:200px;overflow:auto;的话，可以滚动但是完全没有那滑动效果，很郁闷吧？
我 看到很多网站为了实现这一效果，用了第三方类库，最常用的是iscroll（包括新浪手机页，百度等） 我一开始也使用，不过自从用了-webkit-overflow-scrolling: touch;样式后，就完全可以抛弃第三方类库了，把它加在body{}区域，所有的overflow需要滚动的都可以生效了。
锁定 viewport
|
1
2
|
ontouchmove="event.preventDefault()"
//锁定viewport，任何屏幕操作不移动用户界面（弹出键盘除外）。
|
利用 Media Query监听
Media Query 相信大部分人已经使用过了。其实 JavaScript可以配合 Media Query这么用：
|
1
2
3
4
5
6
7
8
9
10
|
var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql);
function handleOrientationChange(mql)
{
if (mql.matches) {
alert('The device is currently in portrait orientation ')
}else{
alert('The device is currently in landscape orientation') }
}
|
借助了 Media Query 接口做的事件监听，所以很强大！
也可以通过获取 CSS 值来使用 Media Query 判断设备情况，详情请看：。
rem最佳实践
rem是非常好用的一个属性，可以根据html来设定基准值，而且兼容性也很不错。不过有的时候还是需要对一些莫名其妙的浏览器优雅降级。以下是两个实践
- 发现chrome当font-size小于12时，rem会按照12来计算。因此设置基准值要考虑这一点
- 可以用以下的代码片段保证在低端浏览器下也不会出问题
html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px / h1 { font-size: 24px; font-size: 2.4rem; } / =24px */12345678910html {font-size: 62.5%;}body {font-size: 14px;font-size: 1.4rem;} /* =14px /h1 {font-size: 24px;font-size: 2.4rem; } / =24px */
被点击元素的外观变化，可以使用样式来设定：
[cce_js]-webkit-tap-highlight-color: 颜色[/cce_js]
检测判断 iPhone/iPod
开发特定设备的移动网站，首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA，然后转向到专属的URL。
|
1
2
3
4
5
6
7
|
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
if (document.cookie.indexOf("iphone_redirect=false") == -1)
{
window.location = "http://m.example.com";
}
}
|
虽然Javascript是可以在水果设备上运行的，但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输，所以下面是服务器端侦测和转向：
|
1
2
3
4
5
6
|
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||
strstr($_SERVER['HTTP_USER_AGENT'],'iPod'))
{
header('Location: http://yoursite.com/iphone');
exit();
}
|
阻止旋转屏幕时自动调整字体大小
|
1
2
3
4
|
html, body, form, fieldset, p, div,h1, h2, h3, h4, h5, h6
{
-webkit-text-size-adjust:none;
}
|
模拟:hover伪类
因 为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：
|
1
2
3
4
5
6
7
|
var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
myLinks[i].addEventListener(’touchstart’,
function(){this.className = “hover”;}, false);
myLinks[i].addEventListener(’touchend’,
function(){this.className = “”;}, false);
}
|
然后用CSS增加hover效果：
|
1
|
a:hover, a.hover { /* 你的hover效果 */ }
|
这样设计一个链接，感觉可以更像按钮。并且，这个模拟可以用在任何元素上。
Flexbox 布局
Flex 模板和实例
深入了解 Flexbox 伸缩盒模型
CSS Flexbox Intro
http://www.w3.org/TR/css3-flexbox/
居中问题
居中是移动端跟pc端共同的噩梦。这里有两种兼容性比较好的新方案。
- table布局法
.box{ text-align:center; display:table-cell; vertical-align:middle; } - 老版本flex布局法.box{ display:-webkit-box; -webkit-box-pack: center; -webkit-box-align: center; text-align:center; }
以上两种其实分别是retchat跟ionic的布局基石。
移动端实现标题文字截断
http://www.75team.com/archives/611
处理 Retina 双倍屏幕
（经典）Using CSS Sprites to optimize your website for Retina Displays
使用CSS3的background-size优化苹果的Retina屏幕的图像显示
使用 CSS sprites 来优化你的网站在 Retina 屏幕下显示
（案例）CSS IMAGE SPRITES FOR RETINA (HIRES) DEVICES
input类型为date情况下不支持placeholder
这其实是浏览器自己的处理。因为浏览器会针对此类型 input 增加 datepicker 模块。
对 input type date 使用 placeholder 的目的是为了让用户更准确的输入日期格式，iOS 上会有 datepicker 不会显示 placeholder 文字，但是为了统一表单外观，往往需要显示。Android 部分机型没有 datepicker 也不会显示 placeholder 文字。
桌面端（Mac）
- Safari 不支持 datepicker，placeholder 正常显示。
- Firefox 不支持 datepicker，placeholder 正常显示。
- Chrome 支持 datepicker，显示 年、月、日 格式，忽略 placeholder。
移动端
- iPhone5 iOS7 有 datepicker 功能，但是不显示 placeholder。
- Andorid 4.0.4 无 datepicker 功能，不显示 placeholder
解决方法：
|
1
2
3
|
<input placeholder="Date"
class="textbox-n" type="text"
onfocus="(this.type='date')" id="date">
|
因为text是支持placeholder的。因此当用户focus的时候自动把type类型改变为date，这样既有placeholder也有datepicker了
判断照片的横竖排列
有这样一种需求，需要判断用户照片是横着拍出来的还是竖着拍出来的，这里需要使用照片得exif信息：
|
1
2
3
4
5
6
7
8
9
|
$("input").change(function() {
var file = this.files[0];
fr = new FileReader;
fr.onloadend = function() {
var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result));
alert(exif.Orientation);
};
fr.readAsBinaryString(file);
});
|
Android上当viewport的width大于device-width时出现文字无故折行的解决办法
http://www.iunbug.com/archives/2013/04/23/798.html
如何实现打开已安装的app，若未安装则引导用户安装?
来自 http://gallery.kissyui.com/redirectToNative/1.2/guide/index.html kissy mobile 通过iframe src发送请求打开app自定义url scheme，如taobao://home（淘宝首页） 、etao://scan（一淘扫描）); 如果安装了客户端则会直接唤起，直接唤起后，之前浏览器窗口（或者扫码工具的webview）推入后台； 如果在指定的时间内客户端没有被唤起，则js重定向到app下载地址。 大概实现代码如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
goToNative:function(){
if(!body) {
setTimeout(function(){
doc.body.appendChild(iframe);
}, 0);
} else {
body.appendChild(iframe);
}
setTimeout(function() {
doc.body.removeChild(iframe);
gotoDownload(startTime);//去下载，下载链接一般是itunes app store或者apk文件链接
/**
* 测试时间设置小于800ms时，在android下的UC浏览器会打开native app时并下载apk，
* 测试android+UC下打开native的时间最好大于800ms;
*/
}, 800);
}
|
需要注意的是 如果是android chrome 25版本以后，在iframe src不会发送请求， 原因如通过location href使用intent机制拉起客户端可行并且当前页面不跳转。
|
1
2
|
window.location = 'intent://' + schemeUrl + '#Intent;scheme=' + scheme + ';
package=' + self.package + ';end';
|
active的兼容(来自薛端阳)
今天发现，要让a链接的CSS active伪类生效，只需要给这个a链接的touch系列的任意事件touchstart/touchend绑定一个空的匿名方法即可hack成功
消除transition闪屏
两个方法：使用css3动画的时尽量利用3D加速，从而使得动画变得流畅。动画过程中的动画闪白可以通过 backface-visibility 隐藏。
|
1
2
3
4
|
-webkit-transform-style: preserve-3d;
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
|
测试是否支持svg图片
|
1
2
|
document.implementation.hasFeature("http://
www.w3.org/TR/SVG11/feature#Image", "1.1")
|
考虑兼容“隐私模式”(from)
ios 的safari提供一种“隐私模式”，如果你的webapp考虑兼容这个模式，那么在使用html5的本地存储的一种————localStorage 时，可能因为“隐私模式”下没有权限读写localstorge而使代码抛出错误，导致后续的js代码都无法运行了。
既然在safari的“隐私模式”下，没有调用localStorage的权限，首先想到的是先判断是否支持localStorage，代码如下：
|
1
2
3
4
5
|
if('localStorage' in window){
//需要使用localStorage的代码写在这
}else{
//不支持的提示和向下兼容代码
}
|
测 试发现，即使在safari的“隐私模式”下，’localStorage’ in window的返回值依然为true，也就是说，if代码块内部的代码依然会运行，问题没有得到解决。 接下来只能相当使用try catch了，虽然这是一个不太推荐被使用的方法，使用try catch捕获错误，使后续的js代码可以继续运行，代码如下：
|
1
2
3
4
5
6
7
8
9
|
try{
if('localStorage' in window){
//需要使用localStorage的代码写在这
}else{
//不支持的提示和向下兼容代码
}
}catch(e){
// 隐私模式相关提示代码和不支持的提示和向下兼容代码
}
|
所以，提醒大家注意，在需要兼容ios的safari的“隐私模式”的情况下，本地存储相关的代码需要使用try catch包裹并降级兼容。
安卓手机点击锁定页面效果问题
有些安卓手机，页面点击时会停止页面的javascript，css3动画等的执行，这个比较蛋疼。不过可以用阻止默认事件解决。
|
1
2
3
4
5
6
7
8
|
function touchHandlerDummy(e)
{
e.preventDefault();
return false;
}
document.addEventListener("touchstart", touchHandlerDummy, false);
document.addEventListener("touchmove", touchHandlerDummy, false);
document.addEventListener("touchend", touchHandlerDummy, false);
|
消除ie10里面的那个叉号
|
1
|
input:-ms-clear{display:none;}
|
关于ios与os端字体的优化(横竖屏会出现字体加粗不一致等)
mac下网页中文字体优化
UIWebView font is thinner in portrait than landscape
扫一扫
1162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
