I have a layout that is supposed to scale based on the device's width using #media queries in the CSS:
#media only screen and (max-width: 510px) {
....
}
While the style does appear to be applied, once the viewport is set to "width=device-width", the design effectively breaks. Probably because it is too narrow , which is strange as the CSS is supposed to scale everything down.
Check the Screen below
Quick edit: Seems to work on Android 4.1 somehow.
Is this just a problem on iPhone? It might be because of the double pixel size of the phone retina display, try adding initial-scale=1.0; maximum-scale=1.0 to the viewport content.
Related
I have a demo of my problem setup here:
http://chevasdesign.com/storage/index.php
The viewport is currently set without a scaling attribute (because having it prevents the page from scaling between landscape and portrait)
<meta name="viewport" content="width=device-width" />
At the end of my CSS I have the following media query in my CSS:
#media only screen and (max-device-width: 480px) {
#wide { width: 440px; }
}
#wide has a width of 920px, a margin of 20px on the left and right, and a gray background. It happens to be the only element.
When I load the page in portrait or landscape on the iPhone4 (in my case), the div spans horizontally beyond the width of the screen requiring horizontal scrolling. See image: http://chevasdesign.com/storage/viewport-media-queries-problem.png).
Shouldn't the iPhone scale the page so that anything less than 480px wide will fit on the screen?
When I set #wide to 280px wide, inside of the media query (which totals 320px with margins), the div fits on the screen, even though the media query has the device width set to 480px. What am I missing?
What is strange to me is that I have the exact viewport setting and media query settings on a full blown website in WordPress and all the media queries are working as intended.
My site (linearedge.com) doesn't fit iphone's screens. I've tried with a lot of different combinations of viewport meta properties and nothing has worked.
Any suggestions?
Thanks!
Try styling your website using CSS #media queries to make it responsive. For example the one below, basically means that if your screen is smaller than 739px, then set the width of #container to 200px. If you adjust the size of containers in your website accordingly it should fit.
#media only screen and (max-width:739px) {
#container { width:200px; }
...
}
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.
This must have been answered before, but I can't find a related question.
I've designed a responsive site, with css media queries going all the way down to correctly display on 320 wide.
Want I want is the iPhone4 (640 x 960) when in portrait mode (640 wide) to adhere to media queries as if it's display-width = 320 pixels instead. Rationale: even though the iphone has more pixels, I do want to display a simplified layout to those user, similar to users of non high-density phones.
Any way to do this, by specifying some meta-tag for these high-pixel density phones for example?
Of course, I could define separate media-queries for iphone 4 and the like with min-device-pixel-ratio: 2 but this leads to separate css media queries (one for low and one for high pixel density) which essentially have the same logic, which doesn't seem very DRY to me( http://en.wikipedia.org/wiki/Don%27t_repeat_yourself )
Strange thing is: the new Ipad 3 , with pixel density 2, DOES correctly render the way I want, i.e: it mimics (at least as css media queries are concerned) a device with half the resolution.
The iPhone 4 (and 4S) will respond to this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It's the "initial-scale" part that you're after. It will make the high res device act like it's 320px wide (or 480 in landscape).
There are other bugs around landscape orientation that you should be aware of.
Also, keep in mind that there is an orientation parameter available to media queries:
#media screen and (orientation:landscape) {
/* Landscape styles */
}
First: I think there's a typo in your question -- on a 640x960 display, 640 wide is portait mode, not landscape. Portrait is vertical, landscape is horizontal.
That said, if I'm reading your question right, you're asking how to target a retina display iphone using media queries for width.
The answer is that you can't -- both the retina display iphone and the non-retina display report themselves to the browser as 320x240. The difference, as you noted, is that the retina display has 2x pixel density, which you can target with media queries:
.avatar {
display: block;
width: 50px;
height: 50px;
background: url("50x50-avatar.png");
}
#media only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.avatar {
background: url("100x100-avatar.png");
background-size: 50px 50px;
}
}
This example is for displaying high-resolution images on retina displays, but you can use the same techniques for tweaking layout for retina displays.
So, in a nutshell, write your styles for the non-retina displays first, and then add retina display overrides using media queries, which should avoid your DRY concerns.
Further reading:
Retina iPad Specific CSS
Safari Developer Library: Configuring the Viewport
So I've built a site specifically for iphones that is 320px wide. It looks great in portrait orientation, but there is a ton of white space on the right when it is turned into landscape mode on the iphone.
I'd like to figure out how to make the viewport zoom into view just the 320px in landscape orientation. This way, there isn't a ton of white space.
I suspect it has something to do with viewport. This is what I currently have:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
But that's not working. Any ideas?
Thanks,
Brad
Try removing "user-scalable=no", or define "maximum-scale"
It is preferable to define width (of div's etc') in percentage instead of defined pixels. That way the width adjusts to the size of the screen automatically.
There are many good tutorials on responsive design.