发表新帖
发表新帖

A way to correct background scaling in iPad's Safari?

前端 未结
关注
6 1789
醉酒成梦
醉酒成梦 2021-01-31 09:45

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 d

相关标签:
6条回答
  • 爱一瞬间的悲伤
    2021-01-31 10:14

    I use:

     body {min-width:2000px; min-height:1500px }
    0 讨论(0)
  • 情深已故
    2021-01-31 10:15

    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.

    0 讨论(0)
  • 自闭症患者
    2021-01-31 10:17

    It seems that this issue only occurs on the iPad when you have a background image that is attached the the <body> tag. If you place the background image into a containing div, the issue can be resolved -- this is a great work-around if you don't need to have your background image "fixed", as the techniques to make background fixed work in IE mandate that you use the <body> tag for images.

    You can see the difference in these two sites, the first uses the <body> tag for positioning (due to the fixed positioning on the background image) and the second uses a containing div:

    http://www.mricsi.com http://www.collinshirsch.com

    Hope that helps!

    edit -- this is not entirely accurate -- it seems like this is the case only some of the time, and the reason behind why is unclear.

    0 讨论(0)
  • 感动是毒
    2021-01-31 10:20

    You can use the solution of @UXdesigner to create a seperated stylesheet for iPad. But you can use a single statement in your current stylesheet:

    @media only screen and (max-device-width: 1024px){
  .yourClassname{
    max-width: 500px;
  }
}

    and of course for smaller devices like phones you can use:

    @media only screen and (max-device-width: 480px){
  .yourClassname{
    max-width: 100px;
  }
}

    Note that these suggestions only work in CSS3 (the latest devices all accept this)

    0 讨论(0)
  • 抹茶落季
    2021-01-31 10:21

    I've got a 5400x556 as a (scrolling) background image in a div. As a .jpg it gets scaled down drastically, as a .png it's fine. The only trouble now is the .png is 5 megs. Grr.

    Good call on the separate stylesheets though.

    good luck

    owen

    0 讨论(0)
  • 一个人的身影
    2021-01-31 10:28

    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/

    0 讨论(0)
 看不清?
提交回复
热议问题