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.
I want to make the login labels (at the very top of this page www.plantify.co.uk) appear correctly on iPad and iPhone.
The website is no way responsive, the trouble I am having is that you have to zoom in to focus on the input labels and it looks very messy.
Can any CSS / Responsive legends help me?
You could use a media query in your CSS like this:
#media screen and (max-width: 480px) { // your code goes here }
And style the elements you want to look different here.
I am looking at writing some custom UITableViewCells that have a UIWebView squirted into them. I want to have a couple of icons that will appear in the html of the uiWebview, the images are stored locally on the device.
I would like to know if these are then treated like normal images when building for different devices. I.e. following the naming convention #2x.png for retina displays?
dose this translate over to uiwebviews or not?
A UIWebView is there to interpret and display whatever the HTML tells it to. In short the answer is NO, a webview will display the EXACT linked image to screen. I have implemented UIWebViews in apps I have developed, that display nothing more than internal HTML. What I do with these, is simply provide the 2X image and let the webview handle the sizing.
Another way to go about this would be to internally recognize (and it is possible) if you are working on a retina display and provide HTML that calls out #2x images. So you would essentially provide myhtml.html and myhtml#2x.html and perform the retina recognition yourself.
You need to use CSS and media queries to tell the web view to display your #2x image. You then also need to set the desired size explicitly.
So, assuming you have a background image that is 25px normally and 50px #2x then you'd do something like this for a retina display:
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
.nav-bar-button-right button .button-icon {
background-image: url(myImage#2x.png);
background-size: 25px 25px;
}
}
Adjust this for your usage but that's the idea. I hope it helps.
Our site renders with inconsistent font sizes on mobile Safari -- and as far as we can tell, only Mobile Safari. This very much has stumped us.
We analyzed the site with Firebug, and the incorrect areas are inheriting the right styles, yet the fonts are still rendered with the wrong sizes.
1) Visit http://www.panabee.com.
2) Conduct a search for a domain name.
The boxes on the left side show the incorrect font sizes. The font size should match the font size on the right side (both box titles and box copy). For instance, the titles, "Variations" and "Twitter," are much larger than the title, "Alternate Endings."
Any clue why?
Mobile Safari (like Chrome for Android, Mobile Firefox and IE Mobile) increases the font size of wide blocks (at all times), such that if you double-tap to zoom in on that block (which fits the block to the screen width), the text will be legible. If you set -webkit-text-size-adjust: 100% (or none), it won't be able to do this, and so when a user double-taps to zoom in on wide blocks the text will be illegibly small; users will be able to read it if they pinch-zoom in, but then the text will be wider than the screen and they'll have to pan horizontally to read each line of text!
Ideally you would fix this by using Responsive Web Design techniques to make your design adapt to mobile screen sizes (in which case you would no longer have any very wide blocks, so mobile browsers would no longer adjust your font sizes).
If that's not an option, and you're stuck serving a desktop site to mobile users, then see if you can tweak your design so none of your blocks of text are wider than the mobile device's device-width (e.g. 320px for many portrait phones) (you can use mobile-specific css to avoid affecting desktop browsers), then Mobile Safari won't need to increase any font sizes (and browsers which reflow text, like the Android Browser and Opera Mobile, also won't need to change your layout).
Finally if you really need to prevent Mobile Safari from adjusting your font sizes you can set -webkit-text-size-adjust: 100%, but do this only as a last resort since it is likely to cause mobile users to have difficulty reading your text, as it'll either be too small or they'll have to pan from side to side after every line they read. Note that you must use 100% not none because none has nasty side-effects in desktop browsers. There are also equivalent -moz-text-size-adjust and -ms-text-size-adjust properties for Mobile Firefox and IE Mobile.
Edit: for example in your case the simplest is probably the 2nd alternative, so you could try adding the following CSS:
/* Mobile browsers only */
#media only screen and (max-device-width: 480px) {
table#all_results {
width: auto;
}
td#main_box {
width: 320px;
}
td#side_box {
width: 320px;
}
}
Though it's not ideal to hardcode 320px like this; you could improve on that by using a variety of CSS media queries, or getting the device-width from JavaScript.
Here's what ultimately worked (tested only on iPhone 4 tho):
/* Mobile browsers only */
#media only screen and (max-device-width: 480px) {
td#main_box { -webkit-text-size-adjust:100% }
}
We awarded the answer to John since his solution was the basis of this one.
Probably not the most elegant answer, but it works.
-webkit-text-size-adjust: none; will cause you to not be able to zoom in mobile devices. You should use 100% instead.
-webkit-text-size-adjust:none;
will probably solve your problem.
target-element { -webkit-text-size-adjust:80% }
will still zoom but keeps it 80% smaller than webkits default.
In my case I had a <p> element and I solved this issue by adding:
width: fit-content;
To it. I was able to reproduce this on Safari mobile as well.
I have fixed font sizes issue by using css hack for IOS app and IOS safari browser.
#supports (-webkit-touch-callout: none) {
//you can write your custom css for IOS safari browser.
}
I have set up a web page to look good on the small screen of an iPhone, but when viewed on the desktop, and going right across the width of the browser, it looks terrible. Is there a way I can restrict the width to say, 480px when viewed on a big screen?
I tried
body {
margin-left:auto;
margin-right:auto;
max-width:480px;
}
but it seems to just set the width at 480px, even on an iPhone on portrait mode.
I think Media Types are what you're looking for.