I have a web page that displays properly for an iphone 6. Is there an easy way to adjust the screen size with a media query for an iphone 5 so everything will shrink down properly?
I know how to trigger CSS for an Iphone 5 what I'm looking for is a way to easily set up CSS so it's just one CSS command to reformat for the iphone 5. Let's say you have it all working for an Iphone 6, could we just set a reduced width for Iphone 5 and have everything automatically scale down?
Only iPhone 5 (portrait mode)
#media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
{
...
}
Only iPhone 5 (landscape mode)
#media only screen and (min-device-width: 320px) and (max-device-width: 568px)
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:landscape)
{
...
}
Another useful media feature is
device-aspect-ratio
Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71.
iPhone 5:
#media screen and (device-aspect-ratio: 40/71) {}
Related
My media Query for iPhone 5 Landscape mode doesn't work. It triggers the media query of iPhone 6 instead of iPhone 5. The portrait mode works perfect though.
Following are the queries for iPhone 5
/* iPhone 5 (landscape) */
#media only screen
and (min-width : 320px)
and (max-width : 568px)
and (orientation : landscape) {
}
/* iPhone 5 (portrait) */
#media only screen
and (min-width : 320px)
and (max-width : 568px)
and (orientation : portrait) {
}
I tried using the max-device-width and min-device-width also. I do have
<meta name="viewport" content="width=device-width, initial-scale=1"> included in the HTML.
Using the (-webkit-device-pixel-ratio: 2) or (device-aspect-ratio: 40/71) is not working and is also messing up the portrait mode as well.
I've been trying to fix this and would appreciate any help on this.
How to target media queries for Samsung tab 8.4 inch.
my code is
#media (device-width: 800px) and (device-height: 1280px)
when first appearance media query is getting affected. once changed the orientation from Portrait to Landscape and again back to Portrait, style is not getting affected.
Device Specification :
http://www.gsmarena.com/samsung_galaxy_tab_s_8_4-6439.php
Thanks in advance
I can't test my solution on physical device, but you can play with orientation:
Landscape mode
#media only screen and (max-device-width : 1280px) and (orientation : landscape) {
/* Styles for landscape*/
}
Portrait mode
#media only screen and (max-device-width : 800x) and (orientation : portrait) {
/* Styles for portrait*/
}
Notice, that different browsers (chrome, android native browser, firefox etc.) handle media queries in different way. For example if you use:
#media only screen and (max-width : 480px)
it would work on Desktop Chrome browser and on android smartphone browser, but not on Safari on iPhone. To make it work on Safari you have to use:
#media only screen and (max-device-width : 480px)
The conclusion is that you need test your media queries on physical devices :)
For more information, check this page: http://www.w3.org/TR/css3-mediaqueries/
I am trying to set the width of an element based on screen width. My code works perfectly on desktops and most mobile devices except the galaxy note 2. I've tried this query but to no avail
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
// my css here
}
The galaxy Note II will switching the innerHeight and Screen.height during the rotation. The innerHeight/Width and Screen.Height/Width are listed below
Portrait innerHeight/Screen.Height 615/1280
innerWidth/Screen.Width 360/720
Landscape innerHeight/Screen.Height 335/720
innerWidth/Screen.Width 640/1280
According to this article
http://tripleodeon.com/2011/12/first-understand-your-screen/
the media query min/max-device-height/width is equal to screen.height/width
So for Galaxy Note II, my media query is listed below
/* Galaxy Note2 - Portrait */
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-height: 1200px) and (max-device-height: 1300px) and (orientation: portrait) {
Code here
}
/* Galaxy Note2 - landscape Due to the Screen Height and Width is changing during orientation changes */
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1270px) and (max-device-width: 1300px) and (orientation: landscape) {
Code here
}
You could target just that phone with a conditional stylesheet. It's kind of like fixing a dent with a sledgehammer but it will work. You can parse the user agent string and add a stylesheet for just that phone model.
Why does the following CSS apply on Nexus 4 which has 1280x768 resolution?
#media
(max-width: 480px) and (orientation: portrait) {
/* this shouldn't apply on Nexus 4 */
}
This might help to target Nexus 4:
#media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2)
(http://cssmediaqueries.com/target/LG+Nexus+4.html)
I don't know if the
(orientation: portrait)
Works on most phones so you might want to research this as I know for a while iPhone wasn't using this just the iPad only.
Test with #media all or #media screen instead of #media only.
More media queries here http://css-tricks.com/css-media-queries/
I am using iPhone4 to test my responsive website
I had read that retina display will show 1px as 2px...
so my doubt is in landscape the device width 480px, screen resolution 640px..
but which one i want to use
#media only screen (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
or
#media only screen (max-device-width : 640px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
No matter what their resolution, you target all iPhones at 320px in portrait mode, and iPhone4S and under stick with 480px in landscape mode. (5 is a little wider in landscape.)