I want to display my page for portrait and landscape iPhones in a different way.
On iPhone 4/4S devices everything works fine (portrait and landscape), but on iPhone 5/5s just the Portrait mode works fine (landscape shows the normal PC website).
Do you know what is wrong?
My queries look like that:
Portrait:
#media (max-width: 320px) {
...
}
Landscape:
#media (min-width: 321px) and (max-width: 568px) {
...
}
UPDATE
My queries look now like
#media (max-width: 320px) {
...
}
#media screen and (max-device-width: 568px) {
...
}
but the picture is the same. iPhone 4/4S (portrait/landscape) and iPhone 5/5s (portrait) works, iPhone 5/5s (landscape) works not...
There are media queries for portrait and landscape:
#media screen and (orientation:portrait) {
…
}
#media screen and (orientation:landscape) {
…
}
If you specifically want to target iPhone, here is a great resource: LINK
For iPhone 5S landscape the media query wil be -
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape)
{
/* STYLES GO HERE */
}
For any other smartphone whose device width you don't know, you can check and get the device width from - http://www.mydevice.io/
This may be helpful in making media queries targeting the smartphones of smaller companies like micromax, lava, etc
Related
I have figured out there is problem with media queries which causes the hindrance in the responsiveness of the website on particularly iphone 6 could someone find me a fix for this as i am not able to make it responsive on iphone 6
website link : www.buildwithcraft.co
/*iPhone 6 Portrait*/
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}
/*iPhone 6 landscape*/
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
}
/*iPhone 6+ Portrait*/
#media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}
/*iPhone 6+ landscape*/
#media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
}
/*iPhone 6 and iPhone 6+ portrait and landscape*/
#media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) {
}
/*iPhone 6 and iPhone 6+ portrait*/
#media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait) {
}
/*iPhone 6 and iPhone 6+ landscape*/
#media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape) {
}
What im trying to achieve is a media query that will work only on all smartphone on portrait orentation
I was using so far this one, but it isnt working in iPhone 5. Why is this?
#media only screen and (max-width:800px) and (orientation: portrait){
aside{ display: none;}
}
iPhone 5 display resolution is 1136 x 640 pixels. Measuring 4 inches diagonally, the new touch screen has an aspect ratio of 16:9 and is branded a Retina display with 326 ppi (pixels per inch).
Try:
#media only screen and (min-width: 560px) and (max-device-width: 1136px) {
aside{ display: none;}
}
All mobile screens in portrait:
In CSS:
#media only screen and (max-device-aspect-ratio: 1) and (orientation: portrait) {
aside{ display: none;}
}
Small mobile screens in portrait with explicitly set viewport width:
Declare this scaling mode in HTML <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In CSS:
#media only screen and (max-width: 479px) and (max-device-aspect-ratio: 1) and (orientation: portrait) {
aside{ display: none;}
}
All mobile screens in portrait with default viewport width (980px):
Note: It has become standard practice in modern web design to define your viewport width instead of leaving it at the default 980px. It is integral to Responsive Design. I strongly suggest taking some time to learn about it.
In CSS:
#media only screen and (width: 980px) and (max-device-aspect-ratio: 1) and (orientation: portrait) {
aside{ display: none;}
}
I have tried the different combinations of width & device-width but on the iPhone in landscape this code never turns the background red;
I am having problem when I have more than 1 media query. See this JSfiddle example the div background is never green unless you remove the last media query
This is what I would like 3 different media queries which target:
both smartphones and tablets(portrait only). This will be where I have all my generic styles for responsive layout
width: 320px - 479px - this will apply to small screens, such as iphone in portrait only
width: 480px - 640px - this will apply to larger screens such as iphone in landscape and ipad in portrait. Not ipad in landscape.
Note this is for a HTML email so its not possible to use JS.
#media only screen and (max-width: 640px) {
body { padding: 10px !important }
}
/* Small screen */
#media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
body { background: blue !important }
}
/* iPhone landscape and iPad portrait */
#media only screen and (max-device-width: 480px) and (max-device-width: 640px) {
body {
background: red !important
-webkit-text-size-adjust:none;
}
}
Reference: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Your own attempt modified
#media only screen and (max-width: 640px) and (orientation: portrait) {
body { padding: 10px !important }
}
/* Small screen */
#media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
body { background: blue !important }
}
/* iPhone landscape and iPad portrait */
#media only screen and (max-device-width: 480px) and (orientation: landscape),
#media only screen and (max-device-width: 640px) and (orientation: portrait) {
body {
background: red !important
-webkit-text-size-adjust:none;
}
}
Media queries also support device orientation. You should try that
#media screen and (orientation:portrait) {
/* Portrait styles */
}
#media screen and (orientation:landscape) {
/* Landscape styles */
}
You can also combine them with width like so
#media screen and (max-device-width : 320px) and (orientation:portrait) {
}
Take a look at this resource, will give you media queries for pretty much everything http://arcsec.ca/media-query-builder/ , you need to be be specifying a min width aswell. also less of the !important, dirty :)
in your case
#media only all and (min-device-width: 320px) and (max-device-width: 480px) {
/* insert styles here */
}
Responsive emails can be tough because there are so many e-mail clients out there, and support can be limited for media queries. You may just want to look into making your divs fluid with percentages, so they scale, rather than media queries. The people at zurb have some great templates which may help out too. http://www.zurb.com/playground/responsive-email-templates
Hope that helps.
i tried this by using Om's solution in a diff. way it worked for me, hope it helps someone
#media only screen and (max-device-width:1024px) and (orientation: portrait) {
/*style*/
}
#media only screen and (max-device-width: 1024px) and (orientation: landscape) {
/*style*/
}
The iPhone 5 has a longer screen and it's not catching my website's mobile view. What are the new responsive design queries for the iPhone 5 and can I combine with existing iPhone queries?
My current media query is this:
#media only screen and (max-device-width: 480px) {}
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: 2/3) {}
iPhone 5:
#media screen and (device-aspect-ratio: 40/71) {}
iPhone 6:
#media screen and (device-aspect-ratio: 375/667) {}
iPhone 6 Plus:
#media screen and (device-aspect-ratio: 16/9) {}
iPad:
#media screen and (device-aspect-ratio: 3/4) {}
Reference:
Media Queries # W3C
iPhone Model Comparison
Aspect Ratio Calculator
There is this, which I credit to this blog:
#media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 5 only */
}
Keep in mind it reacts the iPhone 5, not to the particular iOS version installed on said device.
To merge with your existing version, you should be able to comma-delimit them:
#media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone only */
}
NB: I haven't tested the above code, but I've tested comma-delimited #media queries before, and they work just fine.
Note that the above may hit some other devices which share similar ratios, such as the Galaxy Nexus. Here is an additional method which will target only devices which have one dimension of 640px (560px due to some weird display-pixel anomalies) and one of between 960px (iPhone <5) and 1136px (iPhone 5).
#media
only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
/* iPhone only */
}
All these answers listed above, that use max-device-width or max-device-height for media queries, suffer from very strong bug: they also target a lot of other popular mobile devices (probably unwanted and never tested, or that will hit the market in future).
This queries will work for any device that has a smaller screen, and probably your design will be broken.
Combined with similar device-specific media queries (for HTC, Samsung, IPod, Nexus...) this practice will launch a time-bomb. For debigging, this idea can make your CSS an uncontrolled spagetti. You can never test all possible devices.
Please be aware that the only media query always targeting IPhone5 and nothing else, is:
/* iPhone 5 Retina regardless of IOS version */
#media (device-height : 568px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
/*IPhone 5 only CSS here*/
}
Note that exact width and height, not max-width is checked here.
Now, what is the solution? If you want to write a webpage that will look good on all possible devices, the best practice is to you use degradation
/* degradation pattern
we are checking screen width only
sure, this will change is turning from portrait to landscape*/
/*css for desktops here*/
#media (max-device-width: 1024px) {
/*IPad portrait AND netbooks, AND anything with smaller screen*/
/*make the design flexible if possible */
/*Structure your code thinking about all devices that go below*/
}
#media (max-device-width: 640px) {
/*Iphone portrait and smaller*/
}
#media (max-device-width: 540px) {
/*Smaller and smaller...*/
}
#media (max-device-width: 320px) {
/*IPhone portrait and smaller. You can probably stop on 320px*/
}
If more than 30% of your website visitors come from mobile, turn this scheme upside-down, providing mobile-first approach. Use min-device-width in that case. This will speed up webpage rendering for mobile browsers.
for me, the query that did the job was:
only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)
iPhone 5 in portrait & landscape
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* styles*/
}
iPhone 5 in landscape
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* styles*/
}
iPhone 5 in portrait
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* styles*/
}
None of the response works for me targeting a phonegapp App.
As the following link points, the solution below works.
#media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
// css here
}
Just a very quick addition as I have been testing a few options and missed this along the way. Make sure your page has:
<meta name="viewport" content="initial-scale=1.0">
You can get your answer fairly easily for the iPhone5 along with other smartphones on the media feature database for mobile devices:
http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html
You can even get your own device values on the test page on the same website.
(Disclaimer: This is my website)
afaik no iPhone uses a pixel-ratio of 1.5
iPhone 3G / 3GS: (-webkit-device-pixel-ratio: 1)
iPhone 4G / 4GS / 5G: (-webkit-device-pixel-ratio: 2)
/* iPad */
#media screen and (min-device-width: 768px) {
/* ipad-portrait */
#media screen and (max-width: 896px) {
.logo{
display: none !important;
}
}
/* ipad-landscape */
#media screen and (min-width: 897px) {
}
}
/* iPhone */
#media screen and (max-device-width: 480px) {
/* iphone-portrait */
#media screen and (max-width: 400px) {
}
/* iphone-landscape */
#media screen and (min-width: 401px) {
}
}
You should maybe down the "-webkit-min-device-pixel-ratio" to 1.5 to catch all iPhones ?
#media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}
I was wondering whether it is possible to prevent following behaviour:
I've got a *.css file in which I define the font-size for my mobile-web-app.
html,body {
font-size:16px !important;
}
I didn't use any other font-size attributes in my files.
Now, when I turn into the landscape mode, the font-size changes.
How can I prevent or manipulate this behaviour. Do I have to use #media screen and (max-width: x px) { } or is there any other way?
Thanks for sharing.
You may need to use extra selectors but the following should do the trick.
html,body { -webkit-text-size-adjust:none; }
So that this rule doesn't prevent text resizing in WebKit desktop browsers (Chrome, Safari and soon Opera), wrap it in a CSS media query targeting the desired devices like so:
/* iPhone, portrait & landscape. */
#media all and (max-device-width: 480px) {
html,body { -webkit-text-size-adjust:none; }
}
/* iPad, portrait & landscape. */
#media all and (min-device-width: 768px) and (max-device-width: 1024px) {
html,body { -webkit-text-size-adjust:none; }
}