WEB开发网
开发学院手机开发iPhone 开发 10条小代码开发iPhone友好的网站 阅读

10条小代码开发iPhone友好的网站

 2010-06-22 19:10:00 来源:WEB开发网   
核心提示:function updateOrientation(){var contentType = “show_”;switch(window.orientation){case 0:contentType += “normal”;break;case -90:contentType += “right”;break;cas

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:

contentType += “flipped”;

break;

}

document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);

}

iPhone才识别的CSS

如果不想设备侦测,可以用CSS媒体查询来专为iPhone/iPod定义样式。

@media screen and (max-device-width: 480px) {}

缩小图片

网站的大图通常宽度都超过480像素,如果用前面的代码限制了缩放,这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够,我们可以用CSS让iPhone自动将大图片缩小显示。

@media screen and (max-device-width: 480px){

img{max-width:100%;height:auto;}

}

注意如果原图片非常大,或一个页面非常多图,最好还是在服务器端缩放到480像素宽,iPhone只需要在正常浏览时缩略到320像素。这样不会消耗太多流量和机能。

默认隐藏工具栏

iPhone的浏览器工具栏会在页面最顶端,卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间,特别是横向屏幕时。我们可以让它自动卷动上去。

window.addEventListener('load', function() {

setTimeout(scrollTo, 0, 0, 1);

}, false);

使用特殊链接

这两条不用说了吧:

打电话给我

发短信

模拟:hover伪类

因为iPhone并没有鼠标指针,所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件,onTouchStart 类似 onMouseOver,onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript:

var myLinks = document.getElementsByTagName('a');

for(var i = 0; i < myLinks.length; i++){

Tags:代码 开发 iPhone

编辑录入:coldstar [复制链接] [打 印]
赞助商链接