Menu
I have a website using a huge background image (2000x1500) in a div container (100% x 100%).
When I open that site on Safari on an iPad it gets scaled down (~40%) in a different proportion than the content (~80%).
I moved the background to an img-tag in a div with 100% width and 100% height and an overflow setting "hidden". Exactly the same happens.
Is there a CSS Setting that can help Safari to scale down background images in the same proportion as the content?
919
Open the Settings app . In the Settings app, scroll down to the list of apps and select Safari. On the Safari screen, scroll to the bottom and select Page Zoom.
When browsing web pages in Safari, you can double-tap on a column, word, or picture to fit its width to your screen. Double tap again to zoom out. You can also pinch-in or pinch-out on screen to have more control over how far you zoom in.
What has most likely happened is you may have accidentally enabled the zoom feature by double tapping it with 3 fingers. To fix this issue, simply double-tap on the screen with 3 fingers, and the screen will usually go back to normal and eliminate the magnification.
Change Safari Background in iPadGo to Start Page or Open a New Tab in the browser. Scroll to the bottom and tap on the Edit button. It shall open the Customize Start Page screen. Enable the Background Image toggle if turned off.
Adding this worked for me when I had a background image on the background canvas...
body{ -webkit-background-size: 2000px 1400px;} Obviously one has to replace the dimensions with the correct size for the image.
118
You should definitely create a separate stylesheet for the iPad. You can use the following to do so:
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" /> On this link, you will find information about the orientation of your website on the iPad and how to deal with it.
My advice would be, to create a separate stylesheet (css file) for the iPad version of your site, no matter what you do, you should just create it and add a link tag like the one shown above.
If you have a background of a picture that is 2000x1500px for the iPad version, you can reduce it to fit the iPad, if that's the only thing you've got a problem with. I'd say you should reduce the size of the image to 1024px and declare it in the separate stylesheet for the iPad, and you will see the end result.
Let me know how it goes.
BTW you should read this article as well: http://www.inspiredm.com/2010/02/09/ipad-design/
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
