How do I change a website's default viewport settings in a mobile browser on the fly?

Question

A website works well in Landscape mode. But when turned to Portrait mode, it shows the message "Screen size not supported". I tried to emulate it in my desktop browser and found that changing initial-scale:1 to initial-scale:0.6 in the meta tag in website's HTML did the trick. Now, how to do this on the fly in my iPad? Is there any extension that I can use?

Answer 1

I'm not sure exactly what is the problem in your code since you didn't post any, but maybe CSS Media Queries will do the trick. let's say:

@media only screen and (orientation: portrait) {
   initial-scale:0.6
}

you can learn more on https://www.w3schools.com/css/css_rwd_mediaqueries.asp