First, I apologize for the enormous pictures.
I'm new to media queries. Here's how my site looks when I test in my browser and set the window width to 320px:
That is how I want my site to appear on mobile phones. But when I load it on my iPhone, it appears like this:
Here is the query I am using:
#media only screen and (min-device-width : 320px)
and (max-device-width : 480px),
screen and (max-width : 850px) {
Obviously, this is because the width of the iphone is much greater than 320px. How do I make my site look like the first image, when the device has the resolution of the second image?
Assuming you are using the iPhone 5. I don't have a lot of experience with this, but based on what I am reading at http://www.stephentgilbert.com/mediaqueries/#iPhone, I would try changing max-device-width to 568px. I believe it is also retina, so you might also need and (-webkit-min-device-pixel-ratio: 2) in there as well.
Looks to me like it might be a viewport issue?
Try putting:
<meta name="viewport" content="width=device-width, initial-scale=1">
into the head of your html.
Related
An iPhone 4 with a resolution of 640×960 falls into media queries specified within:
#media only screen and (max-width:480px)
This media query is at the very end of my CSS stylesheet...
Above this query are those working great for iPad (1024) and Desktop, etc...
What am I missing??
I'd like the iPhone4 to respond to media queries specified earlier in the stylesheet, targetted as: (max-width:640px) instead, of course...
For the record, my viewport tag is currently:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You've confused css px and display px. Which is understandable because they're both measured in px. Sigh.
From the point of view of css, a retina display is only 320px wide. However, it's pixel ratio is 2 meaning every 1px in css-land is really 2px on the display.
Taken from here you can use a different selector to identify retina displays :
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
I'm trying to get my responsive website to "respond" when on iphone or ipad for example... my css file is linked here - http://uximag.com/styles.css
All the responsive style is at the bottom of the stylesheet. it works fine while on a desktop but when I go to an iPhone it doesn't work?
Please let me know, I've tried a few methods and cant seem to figure it out.
JimmyRare's comment is a good one. Set your max width to be smaller (640px for iPhone5) and it should apply to your iDevices and your browser when it's shrunk down.
Another option is setting up the code in your HTML document, which isn't ideal in that it combines your HTML writeup with your styling, but it has the added benefit of letting you target the width of the screen's resolution and not the browser width:
<link rel="stylesheet" media="screen and (min-device-width: 640px)" href="640.css" />
I'm having some issues with a page that doesn't have a lot of content and therefore has a small height. The iPhone is scaling the page, and due to this, I can't see the full menu bar (960px wide). I put a minimum height using a media query for both portrait mode and mobile devices with a minimum resolution. I really dislike doing this as I don't know how this will work on other devices, and it only works if the user doesn't rotate the screen (after rotation, the original issue re-occurs).
Is there some way to force the iphone to show a minimum width of 960px even if the height of the content doesn't fill the screen?
You can control the viewport width, and maximum scale (depth visitor is allowed to zoom in) for Apple mobile devices with this META tag:
<meta name="viewport" content="width=960px, maximum-scale=1.0" />
Works with Android and other mobile browsing devices, too.
By default iOS browsers supply a set of default screen dimensions, regardless of actual screen res or orientation.
In order to get them to supply #media tags with the actual screen dimensions there is a Meta tag they will obey:
<meta name="viewport" content="width=device-width, initial-scale=1">
If you add this to your page(s) then your #media commands should work with the actual screen resolution of each device. You then have full control with your #media queries
You can then use things like width: 100% to use the actual screen width.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I have a webpage which I have created a media query for a resolution of 480px in width.
The iphone 4 correctly picks up this version but for some reason it overhangs the page its not using the actual resolution of the iphone 4 which is 640px in width its using a width of 320px. (i read somewhere that it does this for backward compatibility with apps developed for iphone 3)
Is there a way using a viewport or a media query to correct this? Or does someone have an example of how to implement an iphone media query, ive tried this with no luck.
Is there a way to stretch the 480px media query to fit the iphone?
This is my current viewport:
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=5.0; minimum-scale=0.5;" />
Media query - this does nothing and ive tried with just -webkit-device-pixel-ratio: 2 only
#media screen and (max-width: 480px) and (-webkit-device-pixel-ratio: 2) {}
This media query in css3 should detect any iphone or ipod
#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: 2)
The way I understand it is that retina screens will still act as if they are the normal old screens. you act as if things are still 320px is the width. if you want something to take up the full width of an iphone in portrait then you would use 320px not 640px. Really you should be using percentages and ems though not exact px sizes.
Not sure if this answered anything, but I think you were wanting to know why if you set something to 640px it would hang off the edge and not just take up the width of the retina screen.
I'm developing a web application that also has a mobile webapp.
I currently use :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This works great for both iPhone and iPad.
My problem is that I'm using fixed size font (e.g. 18px), but on iPad I would like for it to look exactly as on the iPhone just much respectively bigger.
Is there a way for me to define the viewport in a way that will fit iPhone, and on iPad will look the same just in bigger scale? (like zooming in)?
p.s
I also don't want to stop it from working on android, which it currently does :)
The mobile webapp could be viewed here: HocSpot Mobile, and the webapp here: HocSpot
Why not just use CSS media queries? That will work in a UIWebView.
#media screen and (max-width:1024px) {
// iPad rules
}
#media screen and (max-width:480px) {
// iPhone rules
}
Then you can just style the font sizes with CSS.
Try it out
http://lessframework.com/