Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 20, 2016 at 6:23 pm #714564
    Jerryotto

    I use a video as background in a Color Section and a image as backup for mobile devices. When I open the site on a iPhone 6s, I will get a blown up picture. I tried different sizes, landscape and portrait, but I can’t find the correct size. Anyone with some tips on getting the image more responsive?

    http://hetsein-it.websein.nl/coming-soon/

    *edit* On the main page I have almost the similar problem. Image should be cropped, but on the iPhone 6 only thing seen is small part of the image.

    • This topic was modified 7 years, 12 months ago by Jerryotto.
    November 21, 2016 at 5:25 am #714644
    Rikard

    Hey Jerryotto,

    I don’t see a background image at all on my end when I check on iphone6/chrome, in what browser are you seeing the problem?

    Best regards,
    Rikard

    November 21, 2016 at 10:32 am #714735
    Jerryotto

    Hi Rikard,

    I use safari on the iPhone, and maybe it looks like you don’t have a background cause the image so blown up that you see only 1 color.

    *edit*
    I have done some testing and the only ptoblem left is on the frontpage with the fullscreen slider. Plz take a look at the test page: https://hetsein-it.websein.nl/test2. If you scroll down you see a second fullscreen slider, this time with a caption. It looks like the image isn’t responsive when this caption is added.

    *edit2*
    Changing the screensize within chrome (ctrl-shft-i or plugin) show a far better resize than I’m getting on my iPhone. I can’t figure out what the difference is.
    Screenshot of resized in Chrome with plugin: http://imgur.com/a/SB7vI
    Screenshot from original iPhone: http://imgur.com/a/oYe7H

    Regards,

    Jerry

    • This reply was modified 7 years, 12 months ago by Jerryotto.
    November 23, 2016 at 5:57 am #715715
    Ismael

    Hi,

    It’s because of the retina screens. Use an image that will exactly fit the screen resolution of iPhone devices.

    Note that the iPhone 6 Plus is a 3x screen. For the previous iPhones you can double the screen size values to figure out the max size of your retina image, but on the iPhone 6 Plus you’ll want to triple that value (i.e. a full screen graphic would be 1242 x 2208).

    // http://www.kylejlarson.com/blog/iphone-6-screen-size-web-design-tips/

    If you want to apply a different background image for each device, use css media queries.

    // http://stephen.io/mediaqueries/

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.