Screen Sizes for Web Designers

[blackdream]

---

Hi Guyz,

Please post ninyo dri ang kasagaran nga mga screen sizes from desktop -> laptop -> tablets -> mobiles.

Thanks

[slkmclaren]

iPhone 4(s) = 640 x 960 (newer iPhones with Retina)
= 320 x 480 (older iPhone 3G/3Gs)

iPad = 1024 x 768 (landscape)
= 768 x 1024 (portrait)

Kindle Fire/Nook = 600 x 1024

Android = 480 x 800 (Galaxy S)

[pauloray]

desktops and laptops= 1366 x 768 and 1920 x 1080.

[blackdream]

iPhone 4(s) = 640 x 960 (newer iPhones with Retina)
= 320 x 480 (older iPhone 3G/3Gs)

iPad = 1024 x 768 (landscape)
= 768 x 1024 (portrait)

Kindle Fire/Nook = 600 x 1024

Android = 480 x 800 (Galaxy S)

kanang Android = 480 x 800 (Galaxy S) mao nay pinaka gamay bro?

[blackdream]

desktops and laptops= 1366 x 768 and 1920 x 1080.

Thanks bro

[noy.juan]

you doing a responsive layout? you dont need to get the specific dimension of the viewport, but you need is the min-width and max-width... ive doing responsive layout for a while now...

[Shi Ming]

for implementing
320 x 480 (iPhone)
480 x 640 (iPhone - Landscape and small tablet)
768 x 1024 (iPad - Portrait)
1024 x 768 (iPad - Landscape and Desktop)
1400 x 900 (Desktop)
up (Desktop)

[noy.juan]

for webdesigning in css

/* Media queries used on blog.staydecent.ca by Adrian Unger 
   check my full source at:
   http://blog.staydecent.ca/static/css/style-0.1.6.css */
@media only screen and (min-width:768px) and (max-width:1269px) {
    /* In my particular design, I used a fluid grid limited to a 
       max-width of 1140px, while (if there is enough room)
       pushing the menu outside of layout, requiring a total
       limit of at least 1270px. 
 
       So, this first query applies to any screen-width less
       than 1270px, and adapts accordingly. */
}
@media only screen and (min-width:768px) and (max-width:959px) {
    /* Here is where I adjust for Ipad's and similar screen
       widths. Note that the above query and this one overlap
       meaning any rules above will also apply. */
}
@media only screen and (min-width:0px) and (max-width:767px) {
   /* As soon as we fall below the Ipad's width I use my 'mobile'
      design. So, everything in this query is meant for 
      smartphones and other small screens. */
}
 
/* A popular grid size used is 960px. Skeleton, a new Boilerplate
   for Responsive, mobile-friendly development, is based on that.
   http://www.getskeleton.com/src/stylesheets/skeleton.css */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    /* Here, Skeleton sets the rules for anything less than 960px
       and at least the size of the Ipad screen. */
}
@media only screen and (max-width: 767px) {
    /* Here, rules for anything less than Ipads width, with the
       advice to design for the smallest common width, 320px.
       This is the majority of smarthphones. */
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* This is for any screen less than Ipad's width and at least
       480px. This covers a many large-screened smartphones. It
       is declared after the above rule so it overrides the rules
       meant for 320px. */
}

/* But this two babies works for me */

@media handheld, only screen and (max-width: 767px) {
	/* CSS */
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
/* CSS */
}

[pauloray]

thnx 4 sharing noy.juan

[blackdream]

@noy.juan

Thanks for sharing bro,.. nice info.

ask lng ko, compatible na ang @media sa tanang browser bro?

Dli d i pwde gamitan nako ug jQuery or javascript nga mo auto detect sya sa screen width/height din add class or something nga mo fix ang iyang width during sa pag resize sa window or sa pag load perhaps?

Unsay ika advice nmu bro? mas nindot ang CSS or jQuery?

Thanks