iPhone 5 Basic Screen Component Dimensions


iPhone 5 Basic Screen Component Dimensions


I almost didn’t post this, since there’s really only one dimension that’s different – the height of the iPhone screen. However, after the sixth time of having to look it up online, I knew we needed a new diagram – so here you go!
iphone 5 basic pixel screen dimensions
Click for larger image

I only included retina dimensions for the iPhone 5 since there are no unRetina iPhone 5s. If you need unRetina iPhone dimensions, check out this post. It makes you wonder – how much longer will we even have to support unRetina devices?
For those of you who would prefer a list instead, read on.

iPhone 5 Pixel Dimensions

Note:
  • All pixel dimensions include highlight or stroke effects.  For example, a 60-pixel high button is actually a 58-pixel high button with a 2-pixel highlight on the bottom.
iPhone 5 screen size:
  • Portrait 640×1136 pixels
  • Landscape 1136×640 pixels
iPhone 5 Nav bar:
  • Portrait: 88 pixels high
  • Landscape: 64 pixels high
iPhone 5 Nav bar buttons:
  • Portrait: 60 pixels high
  • Landscape: 48 pixels high
iPhone 5 Nav bar button icons: about 40×40 pixels (when in Landscape mode, it shrinks the 40×40 pixel icon)
iPhone 5 Toolbar: 88 pixels high (does not change)
iPhone 5 Toolbar button: 60 pixels high (does not change)
iPhone 5 Toolbar button icon: about 40×40 pixels
iPhone 5 Tab Bar: 98 pixels high (does not change)
iPhone Tab Bar icon: about 60×60 pixels

from: http://www.vickiwenderlich.com/2012/09/iphone-5-basic-screen-component-dimensions/

留言

張貼留言

這個網誌中的熱門文章

How to PHP export to Excel 2

How to use PHP to export excel file. export.php <? php // load library require 'php-excel.class.php' ; // create a simple 2-dimensional array $data = array (         1 => array ( 'Name' , 'Surname' ),         array ( 'Schwarz' , 'Oliver' ),         array ( 'Test' , 'Peter' )         ); // generate file (constructor parameters are optional) $xls = new Excel_XML ( 'UTF-8' , false , 'My Test Sheet' ); $xls -> addArray ( $data ); $xls -> generateXML ( 'my-test' ); ?> php-excel.class.php <? php /**  * Simple excel generating from PHP5  *  * @package Utilities  * @license http://www.opensource.org/licenses/mit-license.php  * @author Oliver Schwarz <oliver.schwarz@gmail.com>  * @version 1.0  */ /**  * Generating excel documents on-the-fly from PHP5  *  * Uses the excel XML-specification t...
閱讀完整內容

html viewport meta

html viewport meta 淺見及說明 web mobile 化已經是一個全球的局面，好像網站如果沒有做個 media query，都會羞的不敢見人。 神奇的地方是很多人都會在html head 處加上 viewport 這個 meta data，為了釐清實際的效用以及屬性，接下來將大略介紹 viewport-meta 說明屬性與應用。 屬性說明 W3C 協會定義  viewport meta  目前還屬於草案，意思就是有可能隨時修改，特別註記一下，此文於西元2012年3月28日撰寫，以下描述如有出入，以W3C 標準為主。 viewport 可以設定的屬性分別如下， width：可設定數值，或者指定為 device-width height：可設定數值，或者指定為 device-height initial-scale：第一次進入頁面的初始比例 minimum-scale：允許縮小最小比例 maximum-scale：允許放大最大比例 user-scalable：允許使用者縮放，1 or 0 (yes or no) 最初執行viewport meta加入如下 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 編譯過程會轉化成如下的語意， @viewport { width: device-width; initial-scale: 1.0 } 基本說明 width=device-width 先提一下幾個注意的地方，首先在 viewport 裡面的 width 通常會看到設定為device-width ，主要是為了讓整個頁面寬度與手機可視寬度相同，如此就可以簡單相容於不同機型螢幕大小，如果這邊width 沒有設定的話，就會依照 html css 給予的 width 當作預設值。 因為解析度不同，device-width 有時候不一定是 view width ，所以在類似 iphone 4 高解析度機器上，device-width=320 ，可是實際解析度為 480，這時候就需要利用javascript 針對UA 下去做動態調整。 user-scalable 從屬性名稱來看就是...
閱讀完整內容