meta tag viewport content width and initial scale having issues

0
votes

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

2
angularjshtmlweb-applicationsviewportmeta
I am not able to paste the index.html here...any idea how to add it here? - user2733130
You don't need to (and cannot) paste the file. Just paste the offending code. - Christian
@ChristianVarga If I use the below meta tag, it doesn't render the app properly .meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no, minimal-ui"/> Where as if i remove the device width and initial scale, it works fine.. This happens only when device language is set to Chinese... - user2733130

2 Answers

2
votes

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.

0
votes

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?