iphone dev info

最新推荐文章于 2025-11-26 14:45:55 发布

最新推荐文章于 2025-11-26 14:45:55 发布 · 350 阅读

文章标签：

#CSS #Safari #JavaScript #浏览器 #Apple #ViewUI

mobile 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了针对iPhone优化网页的方法，包括如何通过User-Agent判断访问设备、使用JavaScript调整浏览器显示及响应屏幕旋转等技术细节。

iphone 屏幕： 3.5 英寸（对角线） 480 x 320 像素分辨率，每英寸 163 像素

iphone的样式，和一些网站

http://www.cssiphone.com/

挺喜欢这个风格的：http://www.cssiphone.com/site/217

iphone访问网站的浏览器信息：

User-Agent:Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_2 like Mac OS X; zh-cn) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7D11 Safari/528.16
Accept:application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language:zh-cn
Accept-Encoding:gzip, deflate
Cookie:JSESSIONID=w5qi65d9mo0x
Connection:keep-alive

通过user-agent:可以获取到是iphone在访问，那么就可以做一些优化了：）

        String userAgent = request.getHeader("User-Agent");
        if (userAgent.indexOf("iphone") == -1) {
            return true;
        }

需要获取其他信息参考：http://www.iteye.com/topic/243061

iphone浏览是safari, 里面的javascript支持一些iphone的设备，就像以后的浏览器可以通过js调用摄像头一样。

在http://analogue.ca/iphone/ 里面，有这样一段js：

	<script type="application/x-javascript">
		addEventListener('load', function() { 
			setTimeout(hideAddressBar, 0); 
		}, false);
		function hideAddressBar() { 
			window.scrollTo(0, 1); 
		}
	</script>
	<script type="text/javascript">
		function orient()
		{
			switch(window.orientation){  
				case 0: document.getElementById("orientcss").href = "css/portrait.css";
				break;

				case -90: document.getElementById("orientcss").href = "css/landscape.css";
				break;

				case 90: document.getElementById("orientcss").href = "css/landscape.css";
				break;
			}
		}
		window.onload = orient();
	</script>

注意里面的type是：application/x-javascript ，x表示尚未确定。而window.orientation 则是检测iphone的树立状态是横向还是竖向。

http://popart.com/iphone-snow-globe/ 这个就是通过js实现的一个动画，而检测改变状态的是加在body上的：onorientationchange="updateOrientation();"

iphone中文开发中心： http://www.apple.com.cn/developer/iPhone/

互联网开发文档： http://www.apple.com.cn/developer/Documentation/InternetWeb/index.html

iPhone web开发应知应会：http://dreamramon.spaces.live.com/blog/cns!9615FB50FFDBCFD3!4609.entry

iPhone 开发基础教程之一:http://subject.it168.com/article/articleview.aspx?id=274986&type=cms

关于：<meta name="viewport" content="width=320, user-scalable=yes">

http://note19.com/2007/10/03/iphone-and-the-meta-viewport-tag/

http://iphone.hohli.com/ 这个还没弄明白，好像是js模拟的一个iphone的local程序的样式

http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch/11 一个web版本的datepicker

demo: http://cubiq.org/dropbox/sw/ 需要使用safari浏览器查看

隐藏iphone的浏览器地址栏的脚本：http://www.iphonemicrosites.com/tutorials/how-to-hide-the-address-bar-in-mobilesafari/