i'm using an emulator currently at http://mobiletest.me/ but my site is all over the place. The media code i'm using is this:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait)
but it isn't seeming to use this media query and is using my other query for ipad with is #media (max-width:768px)
I am using this meta in my html:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have the media queries in descending order 1600px 1280px 768px etc.
try to use :
#media only screen and (min-width:320px) and (max-width: 568px){}
device-width refers to the actual width of the device someone's using, not the viewport width.
In your example:
#media only screen and (min-device-width : 320px) and (max-device-width : 568px)
Could target iPhone 4's 'portrait' view (640px).
This is important because the iPhone 4 (and many other mobile devices for that matter) for example crams in 2 pixels per 'CSS' pixel. This means the device-width of the iPhone 4 is 320px / 480px, whereas the viewport width is actually 640px / 960px.
Related
I've seen the CSS media query below recommended to target phones. Yes, it works for my phone. However, my phone, and many others, have resolution width 1080px. How does it work...?
#media screen and (max-width: 1024px) { }
Every devise has physical pixel size and a ratio for browsers. For instance iPhoneX has with 1125px and a ratio 3. So the CSS width will be 375px.
So for it's screen with physical resolution 1125px your media will be
#media screen and (max-width: 375px) { }
Very good table with devises resolutions, ratios and CSS scale here:
https://www.mydevice.io/#compare-devices
Although you can determine in media the -webkit-device-pixel-ratio and orientation, like this
/* iPhone X in landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { /* STYLES GO HERE */}
More about it here http://stephen.io/mediaqueries/
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.
I have been using some media queries for the i Pad and they were working fine until two,three day ago. But they just stop working. My i Pad is not recognizing the media queries while they are still working in Firefox native responsive design test view and other online websites to check the responsive designs.
My initiative queries are with view port in header
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2"/>
#media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { //for landscape
#media screen and (min-width: 755px) and (max-width: 1024px) and (orientation : Portrait) //for portrait.
Then tried these ones too
#media screen and (min-device-width: 768px) and (orientation:portrait){
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
#media screen and (min-device-width: 1024px) and (orientation:landscape){
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) and (min-width : 768px) and (max-width : 1024px)
and (orientation : landscape) {
//Also in addition i tried the other view port meta tag too
like
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=2"/>
But no luck
I don't know where I am doing mistake but this kind a important. Please help any kind of help will be appreciated
Try the meta content:
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">
I don't know why this was ever working. I believe the issue is because you are using screen, this media type is reserved for regular computer screens.
Here is a list of the media types:
all: All media devices
aural: Speech/Sound Synthesizers
braille: Braille tactile feedback devices
embossed: Page Braille Printers
handheld: Small/Handheld Devices (like Smart Phones) [NOTE: Android, iOS, & other smart phone browsers ignore this rule.]
print: Printers
projection: Projected Presentations (like slides)
screen: Regular Computer Screens
tty: Media that uses a fixed-pitch character grid (like teletypes &
terminals)
tv: Television-type Devices
Warmth,
Crystal Miller
A Wordpress website (using the Genesis framework) I've designed to be responsive displays properly on an iPhone and a HTC but doesn't on Samsung Galaxy phones. (tested on Samsung Galaxy S2 and a Samsung Ace) I'm currently using the FitVids plugin to make the video embeds responsive.
Strangely, pages with no video embeds viewed on a Samsung phone displays properly, but on a page with video embeds, the page layout displayed is that for an tablet screen and not for a phone screen.
I've tried various other plugins but none of them seem to solve this problem.
It would be great if someone could offer any advice on this.
Here's My site
Here's the css stylesheet
As i have found that samsung screen is 480*800px
Please try with below CSS:
#media only screen
and (min-device-width : 480px)
and (max-device-width : 800px)
and (orientation : landscape) {
}
#media only screen
and (min-device-width : 480px)
and (max-device-width : 800px)
and (orientation : portrait) {
}
Thanks
try using this
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
It is not recommended that you use #media rules, since the pixel size on a mobile device vs desktop may vary.
For instance, instead of:
#media only screen
and (min-device-width : 480px)
and (max-device-width : 800px)
and (orientation : landscape) {
}
#media only screen
and (min-device-width : 480px)
and (max-device-width : 800px)
and (orientation : portrait) {
}
Add a container that will have a margin-left of 5% and margin-right of 5%:
<body>
<div class="container">
# Your body goes here
</div>
</body>
I have found this a much more user friendly and maintained approach to responsive design than the standard #media rule.
I have this media query:
#media only screen
and (max-width : 320px),
only screen
and (max-device-width : 320px)
and (min-device-pixel-ratio : 2),
only screen
and (max-device-width : 320px)
and (-webkit-min-device-pixel-ratio : 2),
only screen
and (max-device-width : 320px) {
It selects browsers on a desktop less than 320px in width, iphone 4's in portrait but it also selects iphone 4's in landscape. Surely this should NOT select iPhone 4's in landscape?
From my understanding the first part selects screens less than 320px in width.
Second part same as second but with webkit vendor prefix
Third part selects screens on mobile devices less than 320px in width but with double pixel density (iPhone 4/4s in this case)
and fourth part is same as previous two but without double pixel density therefore should select iPhone 3gs and other mobiel devices which have 320px max width screens. I therefore, based on the above do not expect it to select landscape mode on any iPhone?
Any ideas how to add to it to solve that?
Neil
You should add orientation : landscape to your CSS, like this:
#media only screen
and (max-device-width : 320px)
and (orientation : landscape) {
/* Styles */
}