手机触屏网站开发技巧总结由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“安卓手机软件开发总结”。
手机网站开发 http://
手机触屏网站开发技巧总结
侦测iPhone/iPod 开发特定设备的移动网站，首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA，然后转向到专属的URL。Code: if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))){ if(document.cookie.indexOf(“iphone_redirect=false”)==-1){
window.location = “http://
Code:
阻止旋转屏幕时自动调整字体大小
-webkit-text-size-adjust是webkit的私有c： Code: html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;} 侦测设备旋转方向 iPhone可以在横屏状态下浏览网页，有时候你会想知道用户设备的手持状态来增强可用性和功能。下面一段Javascript可以判断出设备向哪个方向旋转，并且替换c： Code: window.onload = function initialLoad(){updateOrientation();}
function updateOrientation(){
var contentType = “show_”;switch(window.orientation){
case 0: contentType += “normal”;break;
case-90: contentType += “right”;break;
case 90: contentType += “left”;
break;
case 180:
手机网站开发 http://
contentType += “flipped”;break;}
document.getElementById(“page_wrapper”).setAttribute(“cla”, contentType);}
iPhone才识别的CSS
如果不想设备侦测，可以用CSS媒体查询来专为iPhone/iPod定义样式。Code: @media screen and(max-device-width: 480px){}
CSS3媒体查询 对于CSS3的媒体（media）查询，iPhone和iPad是不同的。通过这个技术，可以对设备不同的握持方向应用不同的样式，增强功能和体验。
iPhone是通过屏幕最大宽度来侦测的。是这样：
Code: 而iPad有点不同，它直接使用了媒体查询中的orientation属性。是这样： Code:
之后只要将不同的样式分别定义出来就可以了。
缩小图片
网站的大图通常宽度都超过480像素，如果用前面的代码限制了缩放，这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够，我们可以用CSS让iPhone自动将大图片缩小显示。Code:
@media screen and(max-device-width: 480px){
img{max-width:100%;height:auto;}
}
手机网站开发 http://
注意如果原图片非常大，或一个页面非常多图，最好还是在服务器端缩放到480像素宽，iPhone只需要在正常浏览时缩略到320像素。这样不会消耗太多流量和机能。
默认隐藏工具栏
iPhone的浏览器工具栏会在页面最顶端，卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间，特别是横向屏幕时。我们可以让它自动卷动上去。Code:
addEventListener(“load”, function(){ setTimeout(hideAddrebar, 0);}, false);function hideAddrebar(){
window.scrollTo(0, 1);
}
模拟:hover伪类 因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：
Code:
var myLinks = document.getElementsByTagName(„a‟);for(var i = 0;i
myLinks[i].addEventListener(‟touchstart‟, function(){this.claName = “hover”;}, false);myLinks[i].addEventListener(‟touchend‟, function(){this.claName = “”;}, false);
}
然后用CSS增加hover效果：
Code:
a:hover, a.hover { /* 你的hover效果 */ }
这样设计一个链接，感觉可以更像按钮。并且，这个模拟可以用在任何元素上。
手机网站开发 http://
iphone fixed positioning
Code: 关于漂浮定位，测试后发现 { position: fixed;} 不能为其用，可以改为 { position:absolute;} 来实现，可以使用iphone看下DEMO：iphone-fixed-positioning Touch Events iPhone 是使用触屏的方式，所以就需要有手触屏和离开的时候的事件机制，幸好，iPhone做好了这方面的工作，提供了四个处理touch的事 件：touchstart，touchend，touchmove，touchcancel(when the system cancels the touch)。
Gestures 即是指两只手指接触屏幕的时候缩放或者旋转的效果，对于侦听gestures，iPhone也有三个事件：gesturestart，gestureend，gesturechange。
同时事件参数event有两个属性：scale，rotate。Scale的中间值是1，大于1表示放大，小于1表示缩小。
手机网站开发 http://
