开发iPhone版校友录
作者：波希米亚 来源：B3 bohemia 时间：2009-08-31 16:29:00
这几天忙个合作，开发iPhone版校友录。用了很久的iPhone，为它量身定制一套页面还是头一次，好在限制不是很多，会写html基本呈现就不成问题了，外加注意一些特殊处理方法，一个iPhone版网页就搞定了。
写在前面的话：
iPhone屏幕分辨率是320×480（160dpi）
虽然都是safari，但只是名字一样，Mac或PC上的safari不能代替全部测试；
<a>标签不用描述hover，点下去就跳转了，想想也知道没法悬停；
项目的一期需求都完成了，总结了几个iPhone定制点，数量不多，也很容易：
doctype的设定：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
在做发布页面的时候发现一个奇怪的问题，textarea输入框最右边被浏览器吃掉一块显示不全。屏幕自适应宽度问题：
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
分别指的是：宽度320px；默认比例1.0；最大放大比例1.0；不允许用户放大；
可按自己需要增加配置。添加到主屏幕的favcion：
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
这个是出彩的地方，可以在主屏幕上显示一个图标，相当于桌面快捷方式。字体大小
默认字体建议14px，特别是锁定屏幕缩放不允许放大的。输入框里文字搞大点，建议18px或16px，不然比输入法文字还小，看起来很不爽。跳过头部到页面某个位置
可以用window.scrollTo(0, 0)实现。一般都是跳过页头直达操作区，特别在“头大”的时候。手机屏幕上寸土寸金哪~访问www自动跳转到iPhone站
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; zh-cn) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3
PHP实现方法：if(strstr($_SERVER[HTTP_USER_AGENT],"iPhone")){
header("location:/iphone/");
die();
}JS实现方法：<script language="javascript">
<!--
//2007-11-24 hqlulu for iphone
var userAgent=navigator.userAgent;
if(userAgent.indexOf("iPhone")>0)
window.location="/iphone/";
//-->
</script>
参考阿权的实现方法
另外，Mac用户可以使用iPhone Dev Center里iPhone SDK中的DashCode制作Web App，而且含有不少iPhone特效的JS脚本，比如侧滑屏效果等。
0
投稿猜你喜欢
python使用selenium打开chrome浏览器时带用户登录信息实现过程详解
Python中的数据对象持久化存储模块pickle的使用示例
Python监听剪切板实现方法代码实例
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
python语法学习print中f-string用法示例
java连接mysql数据库详细步骤解析
Python编译为二进制so可执行文件实例
MySQL Packet for query is too large 问题及解决方法
了解不常见但是实用的Python技巧
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
Numpy 数组操作之元素添加、删除和修改的实现
python如何把嵌套列表转变成普通列表
9个Web设计中常见的可用性错误[译]
Python使用微信itchat接口实现查看自己微信的信息功能详解
一文学会VSCode使用python
使用vue实现HTML页面生成图片的方法
Django Python 获取请求头信息Content-Range的方法
ajax Google PageRank3(PR值)查询源代码
