CODEWITHSUNDEEP
angularjshtmlweb-applicationsviewportmeta
user2733130
user2733130

Reputation: 167

meta tag viewport content width and initial scale having issues

I am developing a webapp using angularjs. The webapp loads perfectly fine when the mobile device language is set to any except Chinese. I debugged a lot and found the issue that the web app is not loading because of the meta view port tag in the index.html. As soon as I remove the width and initial scale from meta viewport tag, the web app loads successfully in the mobile when the language is set to Chinese. navigator.language = "zh-CN" May I know the reason why this is creating problem when navigator.language is set to Chinese ? Is there any other alternate solution to make my webapp working? Having the below meta tag in the index.html, doesn't render my app properly if language is set to Chinese

But if I remove the width and initial-scale, then the app renders properly if language is Chinese.

<meta name="viewport" content="maximum-scale=1.0, user-scalable=no, minimal-ui"/>.

I also tired a sample app, but the issue is observed there as well. Please see below my index.html where you can easily reproduce the issue in any Android phone. I tried in my S3 and also in a S4 device . Please help me on this issue. You can copy the below index.html and load it in your apache server to see the issue. The moment you remove the width and initial-scale from the DOM element, you can see the app loads perfectly.

Please help on this issue

Upvotes: 0

Views: 3719

Answers (2)

Ian Devlin
Ian Devlin

Reputation: 18880

It's never a good idea to set maximum-scale nor to set user-scalable="no" because it stops people from being able to zoom, which they may need to do.

It would be interesting to see what happens when you remove these and simply use the viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

I cannot see how the language would be causing this to happen, but it clearly is occurring, it sounds like a very interesting edge case.

Have you also tried other Chinese related lang settings such as "zh" or "zh-Hans"?

I also wonder if it's related to the font, and thus related to this question?

Upvotes: 0

Christian
Christian

Reputation: 19750

Instead of setting initial-scale and/or user-scalable, try combining a minimum and maximum scale. For example:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

You don't need to use minimal-ui. Apple dropped support for this in iOS8.

Upvotes: 2

Related Questions