I am developing a smartphone friendly version of a website and I am facing a little problem while working with the media query for the smartphone landscape orientation. For the portrait orientation, I am using the following media query and it's working perfectly fine:
#media only screen and (max-width : 320px) { style goes here }
but when i am using this media query for the landscape orientation (taken from css-tricks.com), the styles which I write for the landscape orientation overwrite the styles which I've put in for the desktop version of my website.
#media only screen and (min-width : 321px) { style goes here }
This is only happening when I am inserting styles for the landscape orientation, this doesn't happen when I assign styles for the portrait orientation.
P.S I am doing the testing on an iPhone 4.
You need to set a max-width for your landscape orientation, this won't overwrite your desktop styles until the width is lower than 800px:
#media only screen and (min-width : 321px) and (max-width: 800px) { style goes here }
The other possibility is to wrap your desktop styles into another query and copy them below your portrait and landscape styles:
/* PORTRAIT STYLES */
#media only screen and (max-width : 320px) { style goes here }
/* LANDSCAPE STYLES */
#media only screen and (min-width : 321px) { style goes here }
/* DESKTOP STYLES */
#media only screen and (min-width : 800px) { style goes here }
Note that the Landscape styles will be used for the Desktop version. Sometimes this is a welcome behaviour.
Related
I've been using the following queries based on a pretty popular answer about standard media queries for iPhone 6 models, however, the landscape mode doesn't get picked up.
What is even more puzzling is that the css written for the portrait media query is still active in landscape mode.
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 3)
{ }
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 3)
{ }
Did anyone else experienced the same issue and/or is aware of a workaround?
#media only
is technically deprecated ( http://dev.w3.org/csswg/mediaqueries-4/ ), the "only" is not needed so that may be part of the issue.
However, I've not had success w/#media in general on iPhone 6 without targeting at least 1000px.
Their scaling method seems to send the image to the Safari mobile browser at a desktop ~2k resolution then the local device image scaling processes the scale.
It would appear that a new method, or at least more device-specific is required.
Is there a single common media query for styling all iphone in portrait and landscape mode
Ues following media query :
iPhone in portrait & landscape :
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) { /* STYLES GO HERE */}
For more information http://stephen.io/mediaqueries/ this refrence,its really very helpful.
I am building a responsive page at the moment but I have a problem.
For larger screen sizes I want to enlarge stuff like headings. This works, but testing the page on my iPhone in landscape mode, the headings are too big.
Why the iPhone in portrait triggers a media query for larger screens? Well, the CSS rule that enlarges the headings is enclosed in this media query:
#media only screen and (min-width: 30em) {
/* 480 pixel */
}
and the iPhone screen in landscape is 480px wide. So I tried to do it like this:
#media only screen and (min-width: 30em) not (orientation: landscape) {
/* 480 pixel* /
}
Now it works on my iPhone, but the headings aren't enlarged anymore on my MacBook. Probably it's just some kind of logical error, but where am I going wrong?
Try replacing not (orientation:landscape) with and (orientation:portrait). That failing, try changing the em values to px values. Some browsers don't play nice with em yet, so it's worth a shot.
EDIT: Why not just break it up into separate styles?
#media all and (min-width:480px) and (orientation:landscape) {
// styles for desktops, mouse-friendly interface
}
#media all and (min-width:480px) and (orientation:portrait) {
// styles for mobiles, touch-friendly interface
}
I am working on a new website and have put a set width into my css file. I have a requirement to make the site adaptable and resizable to fit the smaller screens of phones and various tablet devices.
What in my css styles has to be set so that the site best adapts to the other screen sizes?
You will want to use media queries. This is the whole basis behind responsive design.
#media only screen and (max-device-width: 480px) {
/* write smartphone styles here */
}
#media only screen and (max-device-width: 768px) {
/* tablets in portrait mode */
}
#media only screen and (max-device-width: 1024px) {
/* tablets in landscape mode and smaller/older monitors */
}
Take a look here:
http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
I haven't done any iPhone version yet, so I have this question,
In order to be able to browse the website properly -even if the user turns 90º his phone:
Shall i CSS set with's in px or in % ?
If you are programatically targeting the iOS devices such as the iPhone & iTouch then i would use pixels opposed to percentages, but if you are not targeting such devices and want a one stop mobile website for all (most smart-phones) then i would consider using percentages.
you can specificy min-width max-width and min-device-width and max-device-width in your media queries.
Here is a little more about media queries and the combinations that you can do;
/* Target iPhone Portrait */
#media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
/* Target Android Portrait larger than 320px Width */
#media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
/* Target iPhone Landscape */
#media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
/* Target Android Landscape */
#media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }
You can use % with one css class, and the size of components will be adjusted automatically.
You can also use px with two classes, one for portrait, one for landscape :
body[orient="portrait"] {
property: value;
}
body[orient="landscape"] {
property: value;
}
Personally I would use %, rather than px...
You will want the page to become 100% which ever way this is rotated, and then shift the content around accordingly.
The New York Times uses %, as you can see where the page is Landscape you are zoomed in further than Portrait.
If you are building a non specific website for iPhones (sub-domaine like iphone.mywebsite.com) I would suggest using CSS Media Queries as suggested by Xavier. It allows you to do much more than specify a min-width and max-width!
You can specify the type of device (but many devices aren't recognized like they should…) like: screen handheld print tv and many other
But most importantly you can also set if the browser window is in portait or landscape, it's resolution or aspect-ratio and so on…
As for % or px I'd definitely go for px, it's very difficult to have something working as you would wish using %. Because you don't necessarily want the same kind of information if your user comes with an iPhone or with an other device.
For exemple you could take out all the heavy images from your website for iPhone users because they'll probably be using a 3G connection and so making your site a lot faster to load!
A really nice example of what you can do with CSS Media Queries… unfortunately it0s not my work… :-(