In Phonegap I have come across the problem, that if we change the font size of the mobile device from the setting to normal to large then the css which has applied to the application breaks.
So how to overcome this problem ? I have searched a lot but not able to find any solution regarding it.
Any help or advice would be helpful.
It works fine when device font-size is normal. Image here
As I change the device font-size from setting>Display>fonts to Huge Image here
In Phonegap I have come across the problem, that if we change the font size of the mobile device from the setting to normal to large then the css which has applied to the application breaks.
So how to overcome this problem ? I have searched a lot but not able to find any solution regarding it.
Any help or advice would be helpful.
It works fine when device font-size is normal. Image here
As I change the device font-size from setting>Display>fonts to Huge Image here
Share Improve this question edited Mar 4, 2015 at 8:26 Anuj.T asked Mar 4, 2015 at 6:44 Anuj.TAnuj.T 1,62817 silver badges31 bronze badges 3- I don't know answer of this problem but if you don't have to use the system font, it seems to be helpful to use a custom font. Follow this link – Soyeon Kim Commented Mar 4, 2015 at 7:43
- You're trying to change the font size in css and the application breaks? Could you provide some code so we know what you're trying to do? It's possible there's another error cuasing it to crash that you're just not seeing. Also, any info from VS or whatever tool you're using would be helpful. – dlkulp Commented Mar 4, 2015 at 7:53
- thank for your reply guys,I am making no change in css.. css works fine when device fonts are normal but when i change the font from setting>display>font to huge the css breaks..I have updated the question and added the screenshots links. – Anuj.T Commented Mar 4, 2015 at 8:27
2 Answers
Reset to default 21Just found out the solution exactly as i need. By using this plugin.
And Just write the following in your onDeviceReady function in index.js.
if(window.MobileAccessibility){
window.MobileAccessibility.usePreferredTextZoom(false);
}
This will just ignore the system font preferences.
By the information you passed I think that if you adjust the media queries, and the viewport you will have the desired result.
Viewport example. Phonegap Application text and layout too small
Media queries example. Scaling a Phonegap app for different Android screen sizes/densities?