When I rotate my iPhone into landscape mode, the iPhone automatically bumps the text size up.
What is the best way to prevent this? I'd like rotation to give the visitor more text to read, not a larger font. Is JavaScript like this the only way to go?
You could use this CSS property
-webkit-text-size-adjust: none;
Related
I have a really simple portfolio site (sample page: http://stevebishop.org/images/a_working_title/index.html) and I've made a responsive design that loads a 'mobile' style sheet that loads instead for the iPhone sized screen.
The only css really in the code for either is on regular style sheet the images are scaled 100% height of the screen and for the mobile they are 100% width. The intention being to have the largest possible image for each device with an image fitting on the screen all at once.
This all works fine, except the problem is with viewing on iPads - as they should act like desktops and load the regular css file but they don't seem to be able to handle the height: 100% attribute and instead display each image as very very big.
Does anyone have any suggestions as to how to change the code to something more stable, or to work a way around loading the 'mobile' css file for the iPad without it interfering with small desktops which I think it would.
Thank you.
Besides using width: 100%, you can use the properties for example max-width: 400px and max-height:200px to prevent the image is very large.
Hope that helps some.
Regards.
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.
The native audio control does not render correctly on the iPhone or the iPhone simulator.
Go to http://www.anmldr.com/audio and see what I am seeing.
The native audio control will cover up the preceding paragraph and the drop shadow is slightly covering the following paragraph. Even if I put it in a containing div and have a margin-top and a margin-bottom, this does not seem to work.
The width of the native audio control is apparently too small because all of the icons and the counter, etc are all crowded together and on top of each other. The control shows "Loading" continuously until you actually start playing it. Then the numbers appear but they are superimposed on each other.
Is there a way to style the native audio control? Width? Margin?
Linda
Answering my own question...
I figured out that the CSS attributes selector will allow me to style the native HTML5 audio control.
[controls] {
width:100%;
margin-top:1.25em;
margin-bottom:1.25em;
}
This solves the problem of the icons, etc. overlapping. It still does not solve the "Loading" message.
Linda
My app contains a UIWebView. When the app rotates from portrait to landscape or back, the font weight appears to slightly change. Both bold text and regular text get slightly bolder in landscape, and slightly thinner in portrait.
This does not appear to be the case in Safari, only in my app. Here is an example image, taken as a screenshot on the iPad. I have rotated and cropped an example section.
alt text http://dl.swankdb.com/font-change-example.png
I have the following CSS configured, but it seems to prevent the drastic font size change, not the subtle weight change that I am observing:
html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}
Can anyone explain this? The simulator does not do it -- but my iPad, iPhone 3GS and iPhone 4 all have it. I've also received reports from customers that it happens to them, so I know it's not in my head!
I've seen this in Safari itself too with a web app I'm putting together. After a day or so of head scratching, and deconstructing the CSS used by the iPad User Guide, I found that
-webkit-transform: translate3d(0,0,0);
does the trick. Googling around it looks like this enables hardware acceleration of rendering which leads to far more consistent results in portrait and landscape orientations.
Well after spending a rediculous amount of time trying to figure this out I have found a solution:
Use this:
html {
-webkit-font-smoothing: none;
}
The reason for this is that only one mode can make use of the subpixels in the display, because they are arranged in a certain direction. The other mode will display the font with greyscaled anti-aliasing and appear slightly different.
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.