Custom HTML/ Text scalable to device screen size

Discussion Forums > Plugins, Customizing, Source Code

Replies: 9 Views: 42

Zarqa Aspiring developer Posts: 51 Reg: Feb 06, 2013 Lisbon, Portuga... 6,610	confirm \| cancel 12/09/14 06:07 AM (9 years ago) Custom HTML/ Text scalable to device screen size Hi everyone, i have this app with lots of custom html screens to load basic text but when viewed on my device the text is microscopic! is there a way to have the text fill devices screen size? do not know much code so would need basic steps please. Any help much appreciated Zarqa Title Comments Hi everyone, i have this app with lots of custom html screens to load basic text but when viewed on my device the text is microscopic! is there a way to have the text fill devices screen size? do not know much code so would need basic steps please. Any help much appreciated Zarqa

Niraj buzztouch Evangelist Posts: 2943 Reg: Jul 11, 2012 Cerritos 37,930	12/09/14 06:30 AM (9 years ago) Look at the source view of any of those HTML screens. The online HTML Editor is not the best. Then make sure the CSS and your HTML is in the correct locations. Alternatively, you may be better to use an HTML Editor to create separate HTML files. Then use the Custom URL or HTML Doc plugins. -- Niraj Comments Look at the source view of any of those HTML screens. The online HTML Editor is not the best. Then make sure the CSS and your HTML is in the correct locations. Alternatively, you may be better to use an HTML Editor to create separate HTML files. Then use the Custom URL or HTML Doc plugins. -- Niraj

Zarqa Aspiring developer Posts: 51 Reg: Feb 06, 2013 Lisbon, Portuga... 6,610	12/09/14 06:41 AM (9 years ago) thanks Niraj, will look at some html tutorials to understand more of this and may go for that html doc option you suggest Comments thanks Niraj, will look at some html tutorials to understand more of this and may go for that html doc option you suggest

mutzy Aspiring developer Posts: 841 Reg: Nov 03, 2010 Medford, MA 9,860	12/09/14 10:20 AM (9 years ago) I had a similar problem where the font size was okay on a phone but way too big on an iPad or tablet. I'm no expert by any means, but this is what I came up that keeps the text the same size no matter the device. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <title>my custom html</title> <style type="text/css"> </style> </head> Hope that helps, Josh Comments I had a similar problem where the font size was okay on a phone but way too big on an iPad or tablet. I'm no expert by any means, but this is what I came up that keeps the text the same size no matter the device. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <title>my custom html</title> <style type="text/css"> </style> </head> Hope that helps, Josh

Zarqa Aspiring developer Posts: 51 Reg: Feb 06, 2013 Lisbon, Portuga... 6,610	12/09/14 12:45 PM (9 years ago) Thanks for your help Josh. Any input is valuable, i am aiming more at having the text adjust its size to the device`s screen size...not even sure if this is possible..i'll keep digging . Zarqa Comments Thanks for your help Josh. Any input is valuable, i am aiming more at having the text adjust its size to the device`s screen size...not even sure if this is possible..i'll keep digging . Zarqa

yourtownapps Aspiring developer Posts: 63 Reg: Mar 08, 2012 Collingswood, N... 6,130	12/09/14 01:39 PM (9 years ago) Thanks, Josh, I will try out your suggestion to see if it solves my problem of unsatisfactory page layout on some apps. Comments Thanks, Josh, I will try out your suggestion to see if it solves my problem of unsatisfactory page layout on some apps.

AlanMac Aspiring developer Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	12/10/14 03:15 AM (9 years ago) What you want to do is possible with html and there are different ways to achieve it. You need to know a bit about how to hand code html and use style sheets, but it isn't too hard if you are patient. I Use css style sheets to do this; you can set a specific style sheet for a small screen and use a different style sheet for a larger device. This article may help http://perishablepress.com/target-iphone-and-ipad-with-css3-media-queries/ Comments What you want to do is possible with html and there are different ways to achieve it. You need to know a bit about how to hand code html and use style sheets, but it isn't too hard if you are patient. I Use css style sheets to do this; you can set a specific style sheet for a small screen and use a different style sheet for a larger device. This article may help http://perishablepress.com/target-iphone-and-ipad-with-css3-media-queries/

Zarqa Aspiring developer Posts: 51 Reg: Feb 06, 2013 Lisbon, Portuga... 6,610	12/10/14 04:10 AM (9 years ago) Thanks a lot for your tip AlanMac! yes i need to learn the basics but i am willing and will look at article. Comments Thanks a lot for your tip AlanMac! yes i need to learn the basics but i am willing and will look at article.

AlanMac Aspiring developer Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	12/10/14 09:20 AM (9 years ago) Good luck @Zarga, let us know how you get on. Alan Comments Good luck @Zarga, let us know how you get on. Alan

Zarqa Aspiring developer Posts: 51 Reg: Feb 06, 2013 Lisbon, Portuga... 6,610	12/16/14 01:46 PM (9 years ago) forgot to say that your tips @Josh and @Alan worked perfectly! i also added this css style that might have helped too, it tells for the text to display the device default size. Thanks a lot! { font-size: 1em; } Comments forgot to say that your tips @Josh and @Alan worked perfectly! i also added this css style that might have helped too, it tells for the text to display the device default size. Thanks a lot! { font-size: 1em; }

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.

Discussion Forums > Plugins, Customizing, Source Code

Custom HTML/ Text scalable to device screen size

Title

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments