I've tried using several media queries I've found through Google to target the iPhone, but my site still isn't displaying like I want it to on the actual iPhone. It looks fine when I use iphone4simulator.com. Here's the media query I'm using now:
#media only screen and (device-width: 480px) and (orientation: portrait) and (resolution: 163dpi)
Here's the URL: cfbpreview
Thanks.
You have to add this for the iPhone 4 because of the retina display.
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Here is a link to all media queries you might need for a responsive design.
IMPORTANT: This will apply to all devices with a pixel ratio of more then 1.5. If you want it to be more specific to the device you will have to add more conditions to your meida query.
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.
I have had some limited success with implementing the media-queries needed for resizing of elements based on device width - however, I'm running into a snag for iDevices.
Thanks to the wonderful folks here I've been able to get my media-queries running smoothly for the iPhone 5 in landscape mode. Unfortunately, this also cuts off the media on an iPhone 4 in landscape mode. I've tried several different fixes to target the different medias (even found out that order of #media matters) but have had no such luck. One or the other gets overwritten. This is the most recent code that I have for an iPhone 4:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
And this is the code I'm using for an iPhone 5:
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
I'm sure I'm missing something simple, but any help would be appreciated.
You might look into this. I found it a couple hours ago while fixing my media queries. Basically it is for the iPones' super high resolution. If I understood correctly, the new phone has basically 2pixels in the place of one. Thus the super crisp resolution.
This meta tag sets it back the the lower resolution (if I understood correctly)
Hope it helps
I'm trying to target mobile devices (specifically the iPad and iPhone) but using CSS3 media queries the same styling is added to other devices with the same resolution, such as laptops. How can I add mobile device specific styling without adding it to other non-mobile devices too?
So far I'm using this, which adds the css to all devices that are 1024px wide and under, even with the orientation selector:
#media only screen and (min-device-width: 320px) and (orientation:portrait),
(max-device-width: 1024px) and (orientation:landscape){
// Do something
}
EDIT:
For anyone interested, I got this to work just by duplicating the media query but altering the duplicate slightly. It's by far the most efficient way of doing it but the main thing is it works:
#media only screen and (min-device-width: 320px) and (orientation:portrait),
(max-device-width: 1024px) and (orientation:landscape){
// some styling
}
#media only screen and (min-device-width: 320px) and (orientation:portrait),
(max-device-width: 768px) and (orientation:portrait){
// some styling
}
Maybe a look at this, at the section "7.3 Recognized media types", will help you.
Yup: desktop browsers support the orientation media query too.
I don’t think media queries provide a way to detect whether a device is the iPad or the iPhone. They allow you to inspect features of the device (like its width and orientation), rather than identify the device.
What makes your styles inappropriate for non-iPad devices?
I found that all you need is the second media query in your edit:
#media only screen and (min-device-width: 320px) and (orientation: portrait),
(max-device-width: 768px) and (orientation: portrait) {
// some styling
}
It worked like a charm!
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… :-(
I am trying to implement alternate layouts for both the iPad/iPhone and older iPhones as well.
I have established that the best method is to use #media from the CSS3 spec.
As such these are my media queries at the minute:
#media screen and (max-width: 1000px) { ... }
Above is for small desktop and laptop screens.
#media screen and (max-width: 700px) { ... }
Above is for the iPad and VERY small desktop/laptop screens.
#media screen and (max-device-width: 480px) { ... }
Above is for iPhone 3GS- and mobile devices in general.
However, the new iPhone 4 with Steve Jobs's all-singing all-dancing "retina" display means that it has a pixel ratio of 2-1 meaning 1 pixel actually appears to the browser as 2x2 pixels making its resolution (960x640 - meaning it will trigger the iPad layout rather than the mobile device layout) so this requires ANOTHER media query (only so far supported by webkit):
#media screen and (-webkit-min-device-pixel-ratio: 2) { ... }
Now, the thing is... I want my nice shiny new iPhone 4 layout amalgamated with the iPhone 3GS and mobile device layout as they will both have exactly the same inner CSS code,
Therefore making my question;
How do I create an #media rule that points both the iPhone 4, 3GS and other mobiles to the same styles?
Because the iPhone and iPod touch measure max-device-width in logical pixels rather than physical pixels even with the Retina display (as they should), the original media query used for the iPhone should be enough:
#media only screen and (max-device-width: 480px) {
/* iPhone CSS rules here */
}
You'll only need (-webkit-min-device-pixel-ratio: 2) if you need to target the Retina display separately.
BoltClock's answer seems pretty good to me at the moment.
However, thinking in to the future, if Apple (or another manufacturer) releases another device with a device pixel ratio of 2, this media query would be used for this device too.
I don't think it's out of the question to assume that this will happen, and that the new device could have a much larger screen, such as an iPad with a retina display.
To make this query only applicable to the iPhone 4 and previous iPhones (and any other device of a similar size)
#media screen and (max-device-width: 480px), screen and (max-device-width: [[IPHONE_4_WIDTH]]px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone CSS rules here */
}
Unsure of [[IPHONE_4_WIDTH]] right now - don't have one on me, and some sites say 480, some say 960. Try replacing with both. (And let me know what you find :) )
I have been hunting for a way to specifically target the iPhone 3 / 3GS per the second part of the request. The most acceptable solution I've found is to tailor the media queries to the fixed parameters of an iPhone 3.
#media only screen
and (device-width:320px)
and (device-height:480px)
and (-webkit-device-pixel-ratio: 1) { ... }
In order to work this query requires that you use Safari's viewport meta tag to fix the browser to 100% with the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
There are a small number of Android phones that will also get picked up on that query. With the Android Market showing 18.4% of active phones in the potential screen size range of 320x480, only a subset of that will match the device-pixel-ratio on the stock webkit browser. Not perfect, but better than nothing at all.
Lists of phone resolutions
Slightly outdated but thorough: http://cartoonized.net/cellphone-screen-resolution-by-size.php
Only 3 listed as a potential match here: http://en.wikipedia.org/wiki/Comparison_of_Android_devices
Android Market weekly snapshot: http://developer.android.com/resources/dashboard/screens.html
All information was considered as of post date.
Also per mernen's comment #2 to his post here are the docs to target Android devices by pixel density: http://developer.android.com/guide/webapps/targeting.html#DensityCSS
I'm not sure I follow your question. Did you try your queries on the iPhone 4? device-width is measured in logical pixels, not physical ones, so the iPhone 4 still fits the max-device-width: 480px criteria.
Same goes for high-end Android smartphones, which have a pixel ratio of 1.5: the Nexus One has a physical screen of 480x800, logical screen of 320x533.