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;}
}
Related
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
For some reason, the iPhone 5 doesn't change the layout of my site when it is rotated from portrait to landscape or visa-versa. So, if the page is loaded in portrait view, the portrait media queries I have defined kick at and adjust the site, but then if it is rotated, the layout stays optimized for portrait view. If I manually refresh the page though, the landscape view loads, but won't change to portrait if the phone is rotated, unless it is refreshed again.
Here is the basic code from my CSS document:
/* Normal CSS for Desktop Site*/
#media only screen and (orientation:landscape) and (max-device-width: 568px), (max-width: 568px){
/*iPhone 5 Landscape Styles */
}
#media only screen and (orientation:landscape) and (max-device-width: 480px), (max-width: 480px){
/*iPhone 4/4s Landscape Styles*/
}
#media only screen and (orientation:portrait) and (max-device-width: 320px), (max-width: 320px){
/*All iPhones Portrait Styles*/
}
And this is from the <head> of my HTML files:
<!-- WEB APP META -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link href="/img/webapp/default-iphone5.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="/img/webapp/default-iphone#2x.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link rel="apple-touch-icon" sizes="114x114" href="/img/webapp/touch-icon-114.png" />
This issue only happens on the iPhone 5. The media queries work as expected on other iPhones. I've searched around and messed with the code, but nothing seems to be working.
The website link is here if you want to take a look. Note: Only the home page works
Thanks in advance.
This is how you style media for iPhone 5
iPhone 5 in portrait & landscape
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* STYLES GO HERE */}
iPhone 5 in landscape
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPhone 5 in portrait
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) { /* STYLES GO HERE */ }
You've to remember comma.
#media only screen
and (min-device-width : 320px),
and (max-device-width : 568px),
and (orientation : portrait) { /* Style*/ }
Otherwise we're still at the same place were we stareted and wondering how it's poissible D:
I have strange issue when loading a site within iframe of my mobile application. I am having a website with seven pages. When I browse my website url in iphone's safari. The content in all the pages are rendering perfect. but if I load the website in a iframe inside my mobile application the android renders the website correctly inside iframe of mobile application. But in iphone three of the pages the content get overflowed and I can't see the full page. My media queries are listed below. By the way I am using bootstrap framework for my website.
#media (min-width: 768px) and (max-width: 979px) {
// css goes here
}
#media (min-width: 768px)
{
// css goes here
}
#media (max-width: 767px) {
// css goes here
}
#media (min-width: 1200px) {
// css goes here
}
#media (min-width: 768px) and (max-width: 979px) {
// css goes here
}
#media (max-width: 767px) {
// css goes here
}
#media (max-width: 480px) {
// css goes here
}
#media (max-width: 320px)
{
// css goes here
}
#media (max-width: 240px)
{
// css goes here
}
#media (max-width: 979px) {
// css goes here
}
#media (min-width: 980px) {
// css goes here
}
Is there any other media queries targeting the iframe inside mobile application of the iphone. I am new to this responsive mediaqueries. Please help. As I am meeting the client's deadline in two days I have to solve this issue.
Thanks in advance.
Sometimes browsers don't render the mediaqueries features. Try this adding into your head section. May be you get some luck.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
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 */
}