Just wondering if anyone else has experienced the iPad/iPhone scaling their background images down to fit the view port.
In my case, I'm swapping out background images via javascript, and the new background images are super wide to fit large displays. However, the iPad is scaling down the background images that are added to the DOM via javascript. I solved this by using "-webkit-background-size" set to the size that the image should be, but this causes the background image to be stretched and pixelated.
This worked for on iPad:
-webkit-background-size: length_x length_y;
The iphoneOS scales every picture with above 2 million pixels (width*height) 50% down.
I managed it with spliting the background into two pictures.
All you have to do is add this meta tag within the of your pages to prevent the background image from being scaled.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
First of all, if you export your image as a 32 bit png (I use Fireworks to do so), and use that png in your background instead of a jpg file, IOS won't scale the image. Works like a charm, and the size is about the same as a jpg with 100% quality (slightly smaller actually)
Also, aditionally for a better experience in ipad / iphone, you should:
a) set a min with do the body tag (mine is usually 980px)
body {
min-width: 980px;
}
b) set the same width to the viewport meta tag
<meta name="viewport" content="width=980px">
Users should now be able to:
- see the design as you have created it
- zoom the content (wich they couldn't if you used "initial-scale=1, maximum-scale=1" on the viewport meta tag)
- change the device landscape to portrait and vice versa with no issues
Related
I have a CSS layout for a web-based game that was designed to fit the iPad screen only (it's running inside an iPad app). Now I want to port that same game to the iPhone. If I simply run the app using the iPhone 5 simulator, it will just show me a 320x568 section of the screen.
I was wondering if there was a way to (automatically?) shrink down every component on the page to be smaller and fit the iPhone 5's screen. There's lots of images that were designed with the iPad's resolution in mind, so they're bigger than they should be on the iPhone. Can these be resized by the CSS depending on the screen size or would I need to resize them all manually?
In the index.html file I already have included:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
It won't size automatically to the iPhone's screen however. There's also a lot of hardcoded pixel values. Can I simply change those to a percentage that's relative to the screen?
For the record, I didn't write this code, and am not THAT good at CSS. Thank you for your help.
You can checkout this website for help... You can study how to fit a layout as per device size.
http://alistapart.com/article/responsive-web-design
Don't blame if the link expires;-)
This has been asked on here before, but it was never resolved, so I decided so see if anyone has figured out how to do this in the past year:
By default, iPhones and Androids will automatically zoom the page to attempt to make it fit nicely in the frame if no viewport meta tag exists. Web sites designed for desktops will be zoomed out so they fit inside the small viewport, but obviously the pixels aren't really represented truthfully.
So, how do I display a full size web page on a mobile browser so that "300px" is actually represented with 300 real pixels on the mobile device's screen?
I know about the meta viewport method, but from what I've been able to tell so far, the pixel ratio used in such cases is 1.5 or 1.0 when the zoom is set to 100% and the width is set to the device_width, and you can detect at what pixel ratio the mobile device is rendering. I don't seem to be able to find some way to explicitly force devices to use only the 1.0 pixel ratio and never the 1.5 pixel ratio.
How do I for a device to use a pixel ratio of 1.0 so that 300 "pixels" as defined in the CSS actually render across 300 pixels on the mobile device's screen? How do I display a web page at its actual truthful size, not with a pixel ratio of 1.5?
Here's an example of what I DON'T want: Currently, if you use the meta tag to set the viewport properties of a mobile browser like this:
<meta name="viewport" content="width=device_display, initial-scale=1.0" />
then that means that the mobile browser will render the page almost exactly like as the page was designed, except that each "pixel" defined in the CSS actually encompasses 1.5 pixels on the device's screen, thus a pixel ratio of 1.5. This 1.5-pixel-ratio convention was set so that designs don't appear to be too small on high-res devices.
I understand that, but I don't want that in my case.
I want a forced pixel ratio of 1.0 ALWAYS and I will handle high-res devices in my own way. How do I force a 1.0 pixel ratio in mobile browsers?
**If there is a way to simply double the pixel ratio that would work as well
I was able to fix this problem for my site using the following code:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I'm having trouble wrapping my head around sizing images and ui elements for my iphone app using phonegap (basically mobile website gone native app). Here are my PSD settings:
width: 640px
height: 960px
resolution: 326px
I'm creating two images, one at half resolution and the other at full. Then I'm using a plugin to recognize the retina display and replace all images with "*-2x". The trouble is that the images appear larger on my retina iphone and are blurry. I'm wondering if my viewport is messing things up as it zooms in on the screen to fit the app:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I have never used PhoneGap, but to make HTML show images in Retina res what I do is link to a retina res image, say the image is 640x960 pixels, but in the HTML set the size properties to 320x480.
The reason for this, is iOS uses resolution independent "points" instead of "pixels" for layout.
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.
I'm building an iphone version of a website and was curious of the best practices for choosing image sizes. I'm making a simple vertical column of images text. I originally thought that 300px would be the best size (320px portrait mode minus 10px margin each side). However when user rotates to landscape the images will now seem blurry & upscaled. The alternative is to make the images larger, but then in portrait mode they will all need downscaling- does this make the page load slower? I assumed most people view in portrait.
If I go with landscape/480px as the base size what viewport meta should I use to get it to size down for portrait? My current viewport meta tag is :
<meta name="viewport" content="user-scalable=no, width=device-width" />
Many thanks in advance