iphone4 css style sheet

因為iphone4 個resolution 有d 唔同

所以有時css 的setting 都會唔到


呢個方就可以令iphone4 食多一張css

<link
    rel="stylesheet" type="text/css" href="iphone4.css"
    media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>


或者可以咁

@media only screen and (-webkit-min-device-pixel-ratio: 2 ) {
    body{color:red;}
}

讓webapp 似 native app 的幾個tag

1. home screen icon
iphone 3g/3gs: 57px X 57px
iphone 4: 114px X 114px
ipad: 96px X 96px
但其實正方形都ok~

<!-- 會加gloss effect -->
<link rel="apple-touch-icon" href="icon.png"/> 
<!-- 不會加gloss effect -->
<link rel="apple-touch-icon-precomposed" href="icon.png"/> 

2. 收起safari 的toolbars
<meta name="apple-mobile-web-app-capable" content="yes">

3. 加 start up image
一定是320px X 460px
<link rel="apple-touch-startup-image" href="startup.png">

EXTRA:
改最高那條status bar 的顏色
content 可以是 default, black, black-translucent
<meta name="apple-mobile-web-app-status-bar-style" content="black">

定義viewport
user-scalable=no <-- 不讓人放大或縮少你的webpage
<meta name = "viewport" content = "user-scalable=no, width=device-width">

reference link:

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/ConfiguringWebApplications/ConfiguringWebApplications.html

iphone4 detection 找出iphon4

一個用javascript 找出iphone 4 的方法

iphone 4 的mon 同其他iphone 主要唔同之處係個mon

因為個mon 的display 唔同, 所以寫website 的時候要用唔同的方法~~

1. 先用user agent 找出iphone
2. 再用webkit 獨有的javascript object  (devicePixelRatio) , 因為iphone 4 有 retina display, 所以device ratio 會是2, iphone 3 同iphone 3gs 是 1

vas isiPhone4 = false;
var userAgent = window.navigator.userAgent;

if (userAgent.toLowerCase().indexOf('iphone') != -1){

  // is iphone

  if (window.devicePixelRatio && window.devicePixelRatio == 2){

    // is iphone4
    isiPhone4 = true;

  }

}