Adaptive size error in chrome browser on iphone

1

some browser on iphone has adaptive size error,Horizontal screen and Vertical screen sometimes adapte wrong size randomly.
like this

image
image.jpg422×757 117 KB

image
image.jpg1028×573 208 KB

image
image.jpg1035×460 199 KB

it has same problem in wechat or some other browser.
image
image.jpg380×675 74.1 KB

image
image.jpg381×676 122 KB

sometimes like nested page,the content display fit by height but not width.
image
image.jpg1328×745 280 KB

last,there is a small bug i found.when it can’t fit well,all the blue tip botton is disabled.
how to fix it??

2

Thank you for very detailed report!

These are two separate issues:

The first one - the WebGL canvas not adapting its size to the screen width seems to be a bug in some iOS & web browser combinations. We cannot reproduce it on our iOS devices, and we have not yet found a workaround for it. Does changing the orientation of the phone from portrait to landscape and back help?

Yhe second one: you are using an iframe inside an HTML label. What width did you set for an iframe? If it’s a constant it prevents the label from adapting to the screen width. To make the iframe width adaptive you could try using CSS width rules using the visual width units, eg: width: 80vw or width: calc(100vw - 80px) (these are just examples, you would have to experiment a bit to find values for your use case).

1 Like
3

thank you for replaying detailedly，i’ll keep trying testing this software.