Skip to main content
K
KislayCG
Participant
February 28, 2018
Answered

canvas size doubles in iPad

  • February 28, 2018
  • 2 replies
  • 403 views

Hello,
I am creating a project with fixed height and width of 374px.
It is fine in desktop and android tablets but both height and width doubles in iPad.
Can anybody please let me know how to fix that.
I am using AnimateCC version 18.0.1. with no responsive feature in publish setting.

Thanks.

    This topic has been closed for replies.
    Correct answer ClayUUID

    Have you verified that it doubles in size on an actual iPad, or are you only seeing this result in the simulator?

    Animate does intentionally double the resolution of the stage when viewed on a Retina-display iPad to compensate for Safari's pixel doubling, but the physical on-screen size should remain constant.

    2 replies

    C
    ClayUUIDCorrect answer
    Legend
    February 28, 2018

    Have you verified that it doubles in size on an actual iPad, or are you only seeing this result in the simulator?

    Animate does intentionally double the resolution of the stage when viewed on a Retina-display iPad to compensate for Safari's pixel doubling, but the physical on-screen size should remain constant.

    K
    KislayCGAuthor
    Participant
    March 2, 2018

    Yes, I checked in actual iPad. I use chrome's device simulator for screenshot purpose only.
    We fixed the issue by checking if window.devicePixelRatio = 2 then divide height and width by 2.

    I am wondering why height and width are double even if I unchecked responsive option in publish setting.

    The issue is fixed now.

    Thank you for reply.

    C
    ClayUUID
    Legend
    March 2, 2018

    The resolution doubling doesn't have anything to do with Animate's so-called "responsive" mode. It's to compensate for how Safari scales content on Retina/HiDPI screens. By default it just pixel-doubles, which causes things to look blocky.

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    February 28, 2018

    what element is the brown rectangle?

    what are you using to view your ipad screen and console?

    K
    KislayCGAuthor
    Participant
    March 2, 2018

    The brown rectangle is margin in chrome's console.
    The screenshot is from chrome's device simulator.
    I used chrome for screenshot purpose otherwise the issue is same in actual iPad.
    AnimateCC double the canvas height and width even if you have unchecked responsive option in publish setting.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices