Devices Viewport Sizes

When designing and implementing a web page is helpful to know what is the above-the-fold content (the part of the page that is first visible to the user when the page is loaded).

 

This is achieved by knowing the exact viewport size (the viewport is the user’s visible area of a web page).

 

Mobile Devices

(When the Device orientation changes the Width and Height values are reversed)

  • Apple iPhone 5  320x568px
  • Apple iPhone 6, 6s,7,8- 375x667px
  • Apple iPhone 6+, 6s+, 7+, 8+  414x736px
  • Apple iPhone X 375x812px
  • Apple iPad Mini, iPad, iPad Air, iPad Pro 9.7 1024x768px
  • Apple iPad Pro  1366x1024px
  • Samsung Galaxy S6,S6 edge,S7 ,S7 edge, Note 4 360x640px
  • Samsung Galaxy S8,S8+ 360x740px
  • Microsoft Surface Pro,Pro 2 1280x720px
  • Microsoft Surface Pro 3 1440x1024px

 

Laptops/Desktop Viewport size

(The viewport height will differ from the screen resolution depend on the browser and the active toolbars. To take this into account we subtract 130px from the screen resolution height)

  • Laptops with low DPI 1280x670px
  • Laptops with medium DPI(Apple MacBook Air 11-inch) 1366x638px
  • Laptops with high DPI(Apple MacBook Air 13-inch) 1440x770px
  • Desktop/laptop with FullHD display 1920x950px
  • Apple MacBook 12-inch 2304x1310px
  • Apple MacBook Pro 13-inch 2560x1470px
  • Apple MacBook Pro 15-inch 2880x1670px
  • Microsoft Surface Book 3000x1870px

Other Tech Bytes

Sign Up To Our Newsletter

Stay up-to-date with our technical tips, click on a story to learn more.

Join Now