HTML Doc Text Size Issue iOS

Get Started | Login

Discussion Forums > Plugins, Customizing, Source Code

Replies: 6 Views: 84

denikov Lost but trying Posts: 46 Reg: Dec 26, 2011 Reno Nevada 10,360	confirm \| cancel 11/07/12 04:19 PM (13 years ago) HTML Doc Text Size Issue iOS I'm using some HTML files with some information about my business in my app. I first created it for Android and the files show in my emulator just fine. The problem was today when I ran it in the iPhone emulator, the text size was extremely small. This may be a small issue but why the difference? Should I just increase the font size in my file for iOS? There was also a problem with my Jotform forms...same thing. They show up full screen in Android and really small in iOS. Is it a font size issue or is there something more to it? Title Comments I'm using some HTML files with some information about my business in my app. I first created it for Android and the files show in my emulator just fine. The problem was today when I ran it in the iPhone emulator, the text size was extremely small. This may be a small issue but why the difference? Should I just increase the font size in my file for iOS? There was also a problem with my Jotform forms...same thing. They show up full screen in Android and really small in iOS. Is it a font size issue or is there something more to it?

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	11/07/12 05:02 PM (13 years ago) Hi, Throw this in the <head> section of your HTML and see if it helps. It adjusts the HTML page based on the size of the screen (viewport). It should help. <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> Mark Comments Hi, Throw this in the <head> section of your HTML and see if it helps. It adjusts the HTML page based on the size of the screen (viewport). It should help. <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> Mark

denikov Lost but trying Posts: 46 Reg: Dec 26, 2011 Reno Nevada 10,360	11/08/12 06:26 AM (13 years ago) Worked great. Thanks so much, looks great!!! Comments Worked great. Thanks so much, looks great!!!

Paul Rogers Android Fan Posts: 2524 Reg: May 30, 2011 UK 35,740	11/08/12 07:02 AM (13 years ago) @GoNorthWest's solution is fine 99% of the time. To cover most circumstances, you might also change the declaration to: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> and add some extra metadata: <meta name="apple-mobile-web-app-capable" content="yes" /> and you know when you click on an image or link in Android and you get an ugly blue or green overlay on some devices? This'll make the overlay transparent and, for appearances, get rid of it: <style type="text/css"> * { -webkit-tap-highlight-color: rgba(255,255,255,0);} </style> All go between the head tags. Comments @GoNorthWest's solution is fine 99% of the time. To cover most circumstances, you might also change the declaration to: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> and add some extra metadata: <meta name="apple-mobile-web-app-capable" content="yes" /> and you know when you click on an image or link in Android and you get an ugly blue or green overlay on some devices? This'll make the overlay transparent and, for appearances, get rid of it: <style type="text/css"> * { -webkit-tap-highlight-color: rgba(255,255,255,0);} </style> All go between the head tags.

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	11/08/12 09:10 AM (13 years ago) Thanks, @raveyd! Gonna add that to my toolbox so I can have 100% coverage! Mark Comments Thanks, @raveyd! Gonna add that to my toolbox so I can have 100% coverage! Mark

Paul Rogers Android Fan Posts: 2524 Reg: May 30, 2011 UK 35,740	11/08/12 09:16 AM (13 years ago) Wouldn't claim it's 100% Mark, but pretty close! There's quite a lot more apple-mobile metadata that can be added, never needed any more than the above, not sure if it's overkill but it must do something in some circumstances. edit I should add that if you've got an html5 webpage, maybe a canvas or something, the declaration only needs to be <!DOCTYPE html> Comments Wouldn't claim it's 100% Mark, but pretty close! There's quite a lot more apple-mobile metadata that can be added, never needed any more than the above, not sure if it's overkill but it must do something in some circumstances. edit I should add that if you've got an html5 webpage, maybe a canvas or something, the declaration only needs to be <!DOCTYPE html>

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	11/08/12 09:44 AM (13 years ago) It's certainly a good start. Actual use will get us close to 100% as more people bring up issues. Comments It's certainly a good start. Actual use will get us close to 100% as more people bring up issues.

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.