jcesarmobile | 13 Jun 20:56 2012
Picon

phonegap and media queries

On my first phonegap app I used media queries to separate the iphone and ipad appareance.

I used this for iphone

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="apariencia.css">


and this for ipad
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px)" href="apariencia-ipad.css">

surprisingly the retina displays catch the correct css for the device, but I think they shouldn't, because iphone retina is wider than 480px, and ipad retina wider than 1024px, or I am wrong?

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phonegap-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
phonegap+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
Simon MacDonald | 13 Jun 21:02 2012
Picon

Re: phonegap and media queries

The new iPad is 2048 by 1536 pixels for it's display. Up from 1024 by 768 for the iPad and iPad 2. Seems weird that your second CSS would be applied, you'd think none would be applied.


Simon Mac Donald
http://hi.im/simonmacdonald


On Wed, Jun 13, 2012 at 2:56 PM, jcesarmobile <jcesarmobile-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
On my first phonegap app I used media queries to separate the iphone and ipad appareance.

I used this for iphone

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="apariencia.css">


and this for ipad
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px)" href="apariencia-ipad.css">

surprisingly the retina displays catch the correct css for the device, but I think they shouldn't, because iphone retina is wider than 480px, and ipad retina wider than 1024px, or I am wrong?

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phonegap-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
phonegap+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phonegap-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
phonegap+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
Julien Chaumond | 13 Jun 21:09 2012
Picon

Re: phonegap and media queries

I don't think this is surprising, actually -- this is what you should use to target retina displays in your media queries: 


-webkit-min-device-pixel-ratio: 2

On Wed, Jun 13, 2012 at 9:02 PM, Simon MacDonald <simon.macdonald-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
The new iPad is 2048 by 1536 pixels for it's display. Up from 1024 by 768 for the iPad and iPad 2. Seems weird that your second CSS would be applied, you'd think none would be applied.

Simon Mac Donald
http://hi.im/simonmacdonald



On Wed, Jun 13, 2012 at 2:56 PM, jcesarmobile <jcesarmobile-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
On my first phonegap app I used media queries to separate the iphone and ipad appareance.

I used this for iphone

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="apariencia.css">


and this for ipad
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px)" href="apariencia-ipad.css">

surprisingly the retina displays catch the correct css for the device, but I think they shouldn't, because iphone retina is wider than 480px, and ipad retina wider than 1024px, or I am wrong?

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phonegap-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
phonegap+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phonegap-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
phonegap+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phonegap-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
phonegap+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
jcesarmobile | 13 Jun 22:09 2012
Picon

Re: phonegap and media queries

I don't have a new ipad to test, but in the simulator it loads the ipad css, and the 72 px cells looks like 144 px

and in my ipod touch 4G loads the normal css, and the 36px cells looks like 72px (I mean, if the screen is suposed to have double width, it still looks the same than in a non retina screen)

On Wednesday, June 13, 2012 9:02:27 PM UTC+2, Simon wrote:

The new iPad is 2048 by 1536 pixels for it's display. Up from 1024 by 768 for the iPad and iPad 2. Seems weird that your second CSS would be applied, you'd think none would be applied.

Simon Mac Donald
http://hi.im/simonmacdonald


On Wed, Jun 13, 2012 at 2:56 PM, jcesarmobile <jcesarmobile-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
On my first phonegap app I used media queries to separate the iphone and ipad appareance.

I used this for iphone

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="apariencia.css">


and this for ipad
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px)" href="apariencia-ipad.css">

surprisingly the retina displays catch the correct css for the device, but I think they shouldn't, because iphone retina is wider than 480px, and ipad retina wider than 1024px, or I am wrong?

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phonegap-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
phonegap+unsubscribe <at> googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phonegap-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
phonegap+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
Kerri Shotts | 13 Jun 22:34 2012
Picon

Re: phonegap and media queries

Correct. The retina display will treat 25px (logical pixels) as 50px (device pixels). So media width will
still be dealing with logical pixels. 

jcesarmobile | 13 Jun 23:22 2012
Picon

Re: phonegap and media queries

Ok, I thought it was a phonegap thing, but it works the same way on safari mobile, thanks kerri

On Wednesday, June 13, 2012 10:34:22 PM UTC+2, Kerri Shotts wrote:

Correct. The retina display will treat 25px (logical pixels) as 50px (device pixels). So media width will still be dealing with logical pixels.

--
You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phonegap-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
phonegap+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com

Gmane