Different fonts for different devices

Discussion Forums > WebViews and HTML for Mobile

Replies: 33 Views: 247

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	confirm \| cancel 03/09/12 03:49 PM (13 years ago) Different fonts for different devices Is there any way for the docs in BT_DOCS to come up in different font sizes depending upon whether you're on the iphone or the ipad? I made an app which has a lot of HTM docs and I made the font large enough so the iphone users would not have to pinch out a lot, but the ipad users tell me that they have to scroll too much. Any way to make everyone happy? Thanks. steve Title Comments Is there any way for the docs in BT_DOCS to come up in different font sizes depending upon whether you're on the iphone or the ipad? I made an app which has a lot of HTM docs and I made the font large enough so the iphone users would not have to pinch out a lot, but the ipad users tell me that they have to scroll too much. Any way to make everyone happy? Thanks. steve

KevinPerry Android Fan Posts: 199 Reg: Jan 10, 2012 Wisconsin, USA 12,890	03/09/12 03:56 PM (13 years ago) If you can have it look at the header (like when looking for a mobile device), then sort out the 2 of them and set a font variable per the results. I have something close (on my website), but it is in PHP (a lot of mobilecheck scripts out there). Comments If you can have it look at the header (like when looking for a mobile device), then sort out the 2 of them and set a font variable per the results. I have something close (on my website), but it is in PHP (a lot of mobilecheck scripts out there).

MacApple Apple Fan Posts: 4675 Reg: Oct 25, 2010 USA 61,150	03/09/12 04:01 PM (13 years ago) There are other methods but this can be controlled via CSS and detecting the device it is being viewed on. I don't have the code at hand to pass on but you can alter to display differently according to iphone / ipad and device orientation. Have a search on the old Google and you'll find some code. So essentially you are going to want to implement code to detect the device it is being viewed on then use the related style sheet, make sense? Comments There are other methods but this can be controlled via CSS and detecting the device it is being viewed on. I don't have the code at hand to pass on but you can alter to display differently according to iphone / ipad and device orientation. Have a search on the old Google and you'll find some code. So essentially you are going to want to implement code to detect the device it is being viewed on then use the related style sheet, make sense?

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/09/12 04:09 PM (13 years ago) MacApple, Not sure I understand. Don't know much about CSS but I could learn.Does the code you're talking about go in the htm file? I use Dreamweaver to edit the code so is there a command in Dreamweaver to have it detect which device I'm on? Comments MacApple, Not sure I understand. Don't know much about CSS but I could learn.Does the code you're talking about go in the htm file? I use Dreamweaver to edit the code so is there a command in Dreamweaver to have it detect which device I'm on?

Zackamo Aspiring developer Posts: 175 Reg: Oct 25, 2011 Bryan TX 3,400	03/09/12 04:12 PM (13 years ago) Check this out. http://mislav.uniqpath.com/2010/04/targeted-css/ Should help some.. Obviously this conversation is leaning towards that you are talking specifically about and custom html.. You will have to build your own css and use this info to rebuild it. Comments Check this out. http://mislav.uniqpath.com/2010/04/targeted-css/ Should help some.. Obviously this conversation is leaning towards that you are talking specifically about and custom html.. You will have to build your own css and use this info to rebuild it.

MacApple Apple Fan Posts: 4675 Reg: Oct 25, 2010 USA 61,150	03/09/12 04:31 PM (13 years ago) stevek Good link above from Zackamo, solid starting point. Your HTML docs that you edit in Dreamweaver are going to point to a CSS file in your BT_DOCS folder. Read up a little bit on CSS (cascading style sheets - it's all in the name!) and you'll get a better understanding of what is going on. There is no (that I know of) magic button to press in DW but you can pull the code from a multitude of sights, the one above by Zackamo for example. Good thing about this is once you get it you can implement across all new apps with a simple cut and paste. Comments stevek Good link above from Zackamo, solid starting point. Your HTML docs that you edit in Dreamweaver are going to point to a CSS file in your BT_DOCS folder. Read up a little bit on CSS (cascading style sheets - it's all in the name!) and you'll get a better understanding of what is going on. There is no (that I know of) magic button to press in DW but you can pull the code from a multitude of sights, the one above by Zackamo for example. Good thing about this is once you get it you can implement across all new apps with a simple cut and paste.

MacApple Apple Fan Posts: 4675 Reg: Oct 25, 2010 USA 61,150	03/09/12 04:36 PM (13 years ago) Ps Have a look here as well - http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html Comments Ps Have a look here as well - http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	03/09/12 04:49 PM (13 years ago) CSS is absolutely the way to go for this, Steve. I have a ton of HTML files in one of my apps, and I use a different CSS file to control image sizes, font sizes, etc, depending on the type of device detected. This method will only work for HTML files, though. I suspect other doc types are at the mercy of the device for rendering. Mark Comments CSS is absolutely the way to go for this, Steve. I have a ton of HTML files in one of my apps, and I use a different CSS file to control image sizes, font sizes, etc, depending on the type of device detected. This method will only work for HTML files, though. I suspect other doc types are at the mercy of the device for rendering. Mark

Annonymous	edit 03/09/12 05:01 PM (13 years ago) Here's a link that might help : http://www.webmasterworld.com/forum83/176.htm Here's what the <head> section of one of my files looks like: <title></title> <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 /> <link rel=stylesheet media=all and (max-device-width: 480px) href=iphone.css> <link rel=stylesheet media=all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) href=ipad-portrait.css> </head> So, the stylesheet that gets picked depends on the orientation and device-width that is detected. Hope this helps a bit! Mark Comments Here's a link that might help : http://www.webmasterworld.com/forum83/176.htm Here's what the <head> section of one of my files looks like: <title></title> <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 /> <link rel=stylesheet media=all and (max-device-width: 480px) href=iphone.css> <link rel=stylesheet media=all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) href=ipad-portrait.css> </head> So, the stylesheet that gets picked depends on the orientation and device-width that is detected. Hope this helps a bit! Mark

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	03/09/12 04:54 PM (13 years ago) Dang proxy server at work! Keep getting redirected to the old site, so some of my comments are coming up as anonymous! Anyway...hope it helps. Mark Comments Dang proxy server at work! Keep getting redirected to the old site, so some of my comments are coming up as anonymous! Anyway...hope it helps. Mark

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/09/12 05:02 PM (13 years ago) Thanks to you all. I'll give it a go and get back if ( who am I kidding... when) I have more questions. Steve Comments Thanks to you all. I'll give it a go and get back if ( who am I kidding... when) I have more questions. Steve

MacApple Apple Fan Posts: 4675 Reg: Oct 25, 2010 USA 61,150	03/09/12 05:07 PM (13 years ago) Thou art a good learnin' man stevek! Comments Thou art a good learnin' man stevek!

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	03/09/12 05:13 PM (13 years ago) Something you should do is read The Buzztouch Method in my guide. I'll help you understand how it all fits together in Buzztouch. www.myskylla.wordpress.com Fred Comments Something you should do is read The Buzztouch Method in my guide. I'll help you understand how it all fits together in Buzztouch. www.myskylla.wordpress.com Fred

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/09/12 05:26 PM (13 years ago) Thanks to you all. I'll give it a go and get back if ( who am I kidding... when) I have more questions. Steve Comments Thanks to you all. I'll give it a go and get back if ( who am I kidding... when) I have more questions. Steve

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/09/12 07:26 PM (13 years ago) MacApple, Not sure I understand. Don't know much about CSS but I could learn.Does the code you're talking about go in the htm file? I use Dreamweaver to edit the code so is there a command in Dreamweaver to have it detect which device I'm on? Comments MacApple, Not sure I understand. Don't know much about CSS but I could learn.Does the code you're talking about go in the htm file? I use Dreamweaver to edit the code so is there a command in Dreamweaver to have it detect which device I'm on?

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	03/09/12 09:52 PM (13 years ago) The cool thing about CSS is that the markup can either go directly in the HTML file, or be referenced in another file, like I show you in the link above. There are TONS of tutorials out there on CSS...I suspect you'll pick it up pretty quickly (especially since you're just trying to deal with font size). Mark Comments The cool thing about CSS is that the markup can either go directly in the HTML file, or be referenced in another file, like I show you in the link above. There are TONS of tutorials out there on CSS...I suspect you'll pick it up pretty quickly (especially since you're just trying to deal with font size). Mark

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/11/12 10:37 AM (13 years ago) Mark, Tried your code in one of my htm files. This is what happened: Put in as first lines in <head> section: <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 /> <link rel=stylesheet media=all and (max-device-width: 480px) href=iphone.css> <link rel=stylesheet media=all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) href=ipad-portrait.css> Then created two files with dreamweaver 1) iphone.css consisting of one line since all I wanted to do was change the font size for the ipad: { font-size: 100%; } and 2) ipad-portrain.css consisting of one line: { font-size: 12%; } With the iphone and ipad simulators the same thing happens when I click on the htm document. The font in each is enlarged very much, maybe doubled. This is my first attempt at css. What did I do wrong? Thanks. Steve Comments Mark, Tried your code in one of my htm files. This is what happened: Put in as first lines in <head> section: <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 /> <link rel=stylesheet media=all and (max-device-width: 480px) href=iphone.css> <link rel=stylesheet media=all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) href=ipad-portrait.css> Then created two files with dreamweaver 1) iphone.css consisting of one line since all I wanted to do was change the font size for the ipad: { font-size: 100%; } and 2) ipad-portrain.css consisting of one line: { font-size: 12%; } With the iphone and ipad simulators the same thing happens when I click on the htm document. The font in each is enlarged very much, maybe doubled. This is my first attempt at css. What did I do wrong? Thanks. Steve

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/11/12 10:57 AM (13 years ago) Mark, Tried your code in one of my htm files. This is what happened: Put in as first lines in <head> section: <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 /> <link rel=stylesheet media=all and (max-device-width: 480px) href=iphone.css> <link rel=stylesheet media=all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) href=ipad-portrait.css> Then created two files with dreamweaver 1) iphone.css consisting of one line since all I wanted to do was change the font size for the ipad: { font-size: 100%; } and 2) ipad-portrain.css consisting of one line: { font-size: 12%; } With the iphone and ipad simulators the same thing happens when I click on the htm document. The font in each is enlarged very much, maybe doubled. This is my first attempt at css. What did I do wrong? Thanks. Steve Comments Mark, Tried your code in one of my htm files. This is what happened: Put in as first lines in <head> section: <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 /> <link rel=stylesheet media=all and (max-device-width: 480px) href=iphone.css> <link rel=stylesheet media=all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) href=ipad-portrait.css> Then created two files with dreamweaver 1) iphone.css consisting of one line since all I wanted to do was change the font size for the ipad: { font-size: 100%; } and 2) ipad-portrain.css consisting of one line: { font-size: 12%; } With the iphone and ipad simulators the same thing happens when I click on the htm document. The font in each is enlarged very much, maybe doubled. This is my first attempt at css. What did I do wrong? Thanks. Steve

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	03/11/12 12:31 PM (13 years ago) Hi Steve, I'm not a CSS expert by any stretch...I always have to play around with it before I can get it to work. Check out this link and see if it helps. If not, let me know, and I might be able to mess around more with it tonight. http://www.w3schools.com/css/css_font.asp Mark Comments Hi Steve, I'm not a CSS expert by any stretch...I always have to play around with it before I can get it to work. Check out this link and see if it helps. If not, let me know, and I might be able to mess around more with it tonight. http://www.w3schools.com/css/css_font.asp Mark

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/11/12 02:02 PM (13 years ago) Mark, I left out the first two lines of your code (the meta content, whatever that is) and at least now the font sizes on the phone and pad are back to where they were to begin with. However, the font -size: 12% line in the ipad-portrait css file seems to do nothing. I would expect the size to be much smaller than other htm files in the app, but they are all the same. I wonder if it has anything to do with where you place your code in the htm file. I put it as you said to do, at the very top after <head> but maybe it should be closer to the font size tags in the body of the text of the htm file? Have no idea. steve Comments Mark, I left out the first two lines of your code (the meta content, whatever that is) and at least now the font sizes on the phone and pad are back to where they were to begin with. However, the font -size: 12% line in the ipad-portrait css file seems to do nothing. I would expect the size to be much smaller than other htm files in the app, but they are all the same. I wonder if it has anything to do with where you place your code in the htm file. I put it as you said to do, at the very top after <head> but maybe it should be closer to the font size tags in the body of the text of the htm file? Have no idea. steve

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/11/12 02:42 PM (13 years ago) I guess another question would be does the css style font-size override the font-sizes embedded in the htm file? Comments I guess another question would be does the css style font-size override the font-sizes embedded in the htm file?

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	03/11/12 02:45 PM (13 years ago) Hi Steve, Let's say that you want to have the font size of all the text in your <h1> tags change based on the size of the display. You would create the .css files as you did before, and then have something like this in each one of them: h1 { font-size: 100%; } Then, in your HTML file, you might have something like <h1>Test Text</h1>. Assuming the correct display is detected, and the appropriate CSS stylesheet selected, then your <h1> text should display as you want it. Is this pretty much the approach you are taking? Mark Comments Hi Steve, Let's say that you want to have the font size of all the text in your <h1> tags change based on the size of the display. You would create the .css files as you did before, and then have something like this in each one of them: h1 { font-size: 100%; } Then, in your HTML file, you might have something like <h1>Test Text</h1>. Assuming the correct display is detected, and the appropriate CSS stylesheet selected, then your <h1> text should display as you want it. Is this pretty much the approach you are taking? Mark

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/11/12 03:03 PM (13 years ago) Mark, I don't have any h1 tags in the htm file that I can see. It was saved as htm from a word document. Here is an example of the text in one of them: <body lang=EN-US style='tab-interval:.5in'> <p class=MsoNormal align=center style='text-align:center'><span style='font-size:48.0pt'><o:p> </o:p></span></p> <p class=MsoNormal align=center style='text-align:center'><span style='font-size:48.0pt'><o:p> </o:p></span></p> <p class=MsoNormal align=center style='text-align:center'><b style='mso-bidi-font-weight: normal'><u><span style='font-size:48.0pt'>OFFICE MEDICATIONS</span></u></b><span style='font-size:48.0pt'><o:p></o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt'><o:p> </o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt'>Every pediatrician should have a <span class=GramE>broad spectrum</span> antibiotic drop to instill when needed until the parents can fill the Rx.<span style="mso-spacerun:yes">  </span>My current recommendation for conjunctivitis and abrasions would be <span class=SpellE>Moxeza</span> gel, a <span class=SpellE>b.i.d</span>. medication, so compliance is usually excellent.<span style="mso-spacerun:yes">  </span>For corneal abrasions, use it every four hours while awake for the first 24 hours, then twice a day for a total of 5 days.<span style="mso-spacerun:yes">  </span><span class=SpellE>Vigamox</span>, gentamycin or tobramycin drops or sterile saline or sterile water are good choices with which to wet fluorescein strips. <o:p></o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt'><o:p> </o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt'>A topical anesthetic can be invaluable in taking pain out of the equation when trying to examine a child in distress.<span style="mso-spacerun:yes">  </span>One or two drops of <span class=SpellE>tetracaine</span> or its equivalent <span class=GramE>is</span> all you need.<span style="mso-spacerun:yes">  </span>If the history involves trauma with a sharp object it would probably be best to not place any drops.<span style="mso-spacerun:yes">  </span>Just send to the ER or your favorite pediatric ophthalmologist. <o:p></o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt'><o:p> </o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt'>Finally, have fluorescein strips in the office to diagnose and determine the extent of <a href="cornealabrasions.htm">corneal abrasions</a>.<span style="mso-spacerun:yes">  </span>A cobalt blue attachment to your penlight will exhibit the fluorescence at its best. <o:p></o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt'><o:p> </o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt;mso-fareast-language:EN-US; mso-no-proof:yes'> As you see, the font size of 48 is used over and over again. How can a external style override these? Comments Mark, I don't have any h1 tags in the htm file that I can see. It was saved as htm from a word document. Here is an example of the text in one of them: <body lang=EN-US style='tab-interval:.5in'> <p class=MsoNormal align=center style='text-align:center'><span style='font-size:48.0pt'><o:p> </o:p></span></p> <p class=MsoNormal align=center style='text-align:center'><span style='font-size:48.0pt'><o:p> </o:p></span></p> <p class=MsoNormal align=center style='text-align:center'><b style='mso-bidi-font-weight: normal'><u><span style='font-size:48.0pt'>OFFICE MEDICATIONS</span></u></b><span style='font-size:48.0pt'><o:p></o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt'><o:p> </o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt'>Every pediatrician should have a <span class=GramE>broad spectrum</span> antibiotic drop to instill when needed until the parents can fill the Rx.<span style="mso-spacerun:yes">  </span>My current recommendation for conjunctivitis and abrasions would be <span class=SpellE>Moxeza</span> gel, a <span class=SpellE>b.i.d</span>. medication, so compliance is usually excellent.<span style="mso-spacerun:yes">  </span>For corneal abrasions, use it every four hours while awake for the first 24 hours, then twice a day for a total of 5 days.<span style="mso-spacerun:yes">  </span><span class=SpellE>Vigamox</span>, gentamycin or tobramycin drops or sterile saline or sterile water are good choices with which to wet fluorescein strips. <o:p></o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt'><o:p> </o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt'>A topical anesthetic can be invaluable in taking pain out of the equation when trying to examine a child in distress.<span style="mso-spacerun:yes">  </span>One or two drops of <span class=SpellE>tetracaine</span> or its equivalent <span class=GramE>is</span> all you need.<span style="mso-spacerun:yes">  </span>If the history involves trauma with a sharp object it would probably be best to not place any drops.<span style="mso-spacerun:yes">  </span>Just send to the ER or your favorite pediatric ophthalmologist. <o:p></o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt'><o:p> </o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt'>Finally, have fluorescein strips in the office to diagnose and determine the extent of <a href="cornealabrasions.htm">corneal abrasions</a>.<span style="mso-spacerun:yes">  </span>A cobalt blue attachment to your penlight will exhibit the fluorescence at its best. <o:p></o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt'><o:p> </o:p></span></p> <p class=MsoNormal><span style='font-size:48.0pt;mso-fareast-language:EN-US; mso-no-proof:yes'> As you see, the font size of 48 is used over and over again. How can a external style override these?

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	03/11/12 05:18 PM (13 years ago) Hi Steve, It appears that Dreamweaver puts all kinds of different stuff in your code. In order to use the external CSS stylesheets, you'll need to strip out the current code, create your stylesheet, and then markup your HTML (like the h1 example I gave you). I think that might be a lot of work. I'd suggest using a program that creates cleaner HTML code, or one that will generate your sylesheets based on your design. I've used this from time to time, and it's pretty decent. You can get a free trial: http://www.coffeecup.com/html-editor/ Creating HTML that changes based on your device is going to take some work, and probably a lot of rewrite of your current code. There are lots of tutorials on the web on how to do CSS...I'd check them out and give it a shot. It's absolutely worth learning, but will take some time. Mark Comments Hi Steve, It appears that Dreamweaver puts all kinds of different stuff in your code. In order to use the external CSS stylesheets, you'll need to strip out the current code, create your stylesheet, and then markup your HTML (like the h1 example I gave you). I think that might be a lot of work. I'd suggest using a program that creates cleaner HTML code, or one that will generate your sylesheets based on your design. I've used this from time to time, and it's pretty decent. You can get a free trial: http://www.coffeecup.com/html-editor/ Creating HTML that changes based on your device is going to take some work, and probably a lot of rewrite of your current code. There are lots of tutorials on the web on how to do CSS...I'd check them out and give it a shot. It's absolutely worth learning, but will take some time. Mark

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/11/12 05:23 PM (13 years ago) Mark, Thanks for all the advice. Don't think at the moment it's top on my hit parade of stuff to do. Just one user's suggestion and others like it the way it is. So at moment I'll concentrate on other apps. Though, if you can comment on my thread called Link to app in itunes I'd appreciate it. It's related to one of you old threads about being able to add a rate your app page to the menus. Steve Comments Mark, Thanks for all the advice. Don't think at the moment it's top on my hit parade of stuff to do. Just one user's suggestion and others like it the way it is. So at moment I'll concentrate on other apps. Though, if you can comment on my thread called Link to app in itunes I'd appreciate it. It's related to one of you old threads about being able to add a rate your app page to the menus. Steve

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	03/11/12 05:26 PM (13 years ago) Hi Steve, Yeah, I realized at one point as well that I would need to present different HTML pages for different devices...specifically iPad and iPhone. My Fishing Spots app is based on that, but I have a long way to go in learning and making it look good. I saw your other post, and I have to do some research. I didn't have an immediate answer. Mark Comments Hi Steve, Yeah, I realized at one point as well that I would need to present different HTML pages for different devices...specifically iPad and iPhone. My Fishing Spots app is based on that, but I have a long way to go in learning and making it look good. I saw your other post, and I have to do some research. I didn't have an immediate answer. Mark

MacApple Apple Fan Posts: 4675 Reg: Oct 25, 2010 USA 61,150	03/11/12 05:30 PM (13 years ago) Hey guys, as a wee aside. It isn't Dreamweaver adding in to the code it is down to using and editing that doc Stevek is using. Dreamweaver is one of the most efficient solutions for HTML, CSS and so on. Stevek If you use inline formatting of your text in the HTML doc it will over ride the CSS, make sense? So in the doc that you posted above the formatting will not get overridden (sp) by CSS as you are directly calling the font size in your HTML code. Comments Hey guys, as a wee aside. It isn't Dreamweaver adding in to the code it is down to using and editing that doc Stevek is using. Dreamweaver is one of the most efficient solutions for HTML, CSS and so on. Stevek If you use inline formatting of your text in the HTML doc it will over ride the CSS, make sense? So in the doc that you posted above the formatting will not get overridden (sp) by CSS as you are directly calling the font size in your HTML code.

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	03/11/12 05:49 PM (13 years ago) Much better explanation than I gave, @MacApple...thanks! I would suspect that Dreamweaver has some way of generating external stylesheets as well, and possibly making versions of HTML for multiple platforms. But I have no experience with Dreamweaver, so I'm not sure. Mark Comments Much better explanation than I gave, @MacApple...thanks! I would suspect that Dreamweaver has some way of generating external stylesheets as well, and possibly making versions of HTML for multiple platforms. But I have no experience with Dreamweaver, so I'm not sure. Mark

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/11/12 05:52 PM (13 years ago) MacApple, Yea, I didn't see how CSS could change what is already inline, though I thought that if you placed the commands about the orientation after all the text, by using the percent change in the font-text css file it would take the inline text and change the already decided upon font by that percentage. All my htms were originally formatted, and photos added to them, by Word and I only use Dreamweaver to edit them. I did it this was since I was much more familiar with docs than html. I still have all the docx files. Can I import them into some htm editor and have the editor do a better job of formatting them so that I could use CSS to change fonts for each device? It would be a little work but might be worth it for an upgrade. Thanks. Steve Comments MacApple, Yea, I didn't see how CSS could change what is already inline, though I thought that if you placed the commands about the orientation after all the text, by using the percent change in the font-text css file it would take the inline text and change the already decided upon font by that percentage. All my htms were originally formatted, and photos added to them, by Word and I only use Dreamweaver to edit them. I did it this was since I was much more familiar with docs than html. I still have all the docx files. Can I import them into some htm editor and have the editor do a better job of formatting them so that I could use CSS to change fonts for each device? It would be a little work but might be worth it for an upgrade. Thanks. Steve

MacApple Apple Fan Posts: 4675 Reg: Oct 25, 2010 USA 61,150	03/11/12 05:53 PM (13 years ago) Dreamweaver rocks, I just like seeing it all work in the two split screen windows so you see changes right away, a bit like hitting refresh on the Sim or iPhone in BT. CoffeeCup do some sweet stuff as well. Monday already, almost. Comments Dreamweaver rocks, I just like seeing it all work in the two split screen windows so you see changes right away, a bit like hitting refresh on the Sim or iPhone in BT. CoffeeCup do some sweet stuff as well. Monday already, almost.

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/11/12 05:58 PM (13 years ago) MacApple, Yea, I didn't see how CSS could change what is already inline, though I thought that if you placed the commands about the orientation after all the text, by using the percent change in the font-text css file it would take the inline text and change the already decided upon font by that percentage. All my htms were originally formatted, and photos added to them, by Word and I only use Dreamweaver to edit them. I did it this was since I was much more familiar with docs than html. I still have all the docx files. Can I import them into some htm editor and have the editor do a better job of formatting them so that I could use CSS to change fonts for each device? It would be a little work but might be worth it for an upgrade. Thanks. Steve Comments MacApple, Yea, I didn't see how CSS could change what is already inline, though I thought that if you placed the commands about the orientation after all the text, by using the percent change in the font-text css file it would take the inline text and change the already decided upon font by that percentage. All my htms were originally formatted, and photos added to them, by Word and I only use Dreamweaver to edit them. I did it this was since I was much more familiar with docs than html. I still have all the docx files. Can I import them into some htm editor and have the editor do a better job of formatting them so that I could use CSS to change fonts for each device? It would be a little work but might be worth it for an upgrade. Thanks. Steve

MacApple Apple Fan Posts: 4675 Reg: Oct 25, 2010 USA 61,150	03/11/12 06:13 PM (13 years ago) Stevek Example of an <h1> tag, similar to above, that calls a CSS file which tells it how to display the <h1> tag. You can of course import but you'll have to strip out a lot and replace all of those inline font references. So. You have your HTML doc something like this: <h1>You can have an App for that</h1> The corresponding code in your CSS file will look like this: For the <h1> tag: h1{ color:#34ad5b; font-size:24px; font-weight:bold; } You'll have to add in the options to detect device and alter font size. CSS is very, very useful, it makes your HTML code lighter and quicker to load and saves you rewriting things a ton of times. Comments Stevek Example of an <h1> tag, similar to above, that calls a CSS file which tells it how to display the <h1> tag. You can of course import but you'll have to strip out a lot and replace all of those inline font references. So. You have your HTML doc something like this: <h1>You can have an App for that</h1> The corresponding code in your CSS file will look like this: For the <h1> tag: h1{ color:#34ad5b; font-size:24px; font-weight:bold; } You'll have to add in the options to detect device and alter font size. CSS is very, very useful, it makes your HTML code lighter and quicker to load and saves you rewriting things a ton of times.

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/11/12 07:09 PM (13 years ago) MacApple, Thanks. I think for my next app I'll start the right way. Or if I add htm files to the app, then I'll try it with CSS. The thought of going back and redoing all my htm files is a bit daunting. Also, since the app works, ( though maybe not optimally), I believe I'll stick to the , "if it ain't broke, don't fix it" philosophy. Steve Comments MacApple, Thanks. I think for my next app I'll start the right way. Or if I add htm files to the app, then I'll try it with CSS. The thought of going back and redoing all my htm files is a bit daunting. Also, since the app works, ( though maybe not optimally), I believe I'll stick to the , "if it ain't broke, don't fix it" philosophy. Steve

MacApple Apple Fan Posts: 4675 Reg: Oct 25, 2010 USA 61,150	03/11/12 07:12 PM (13 years ago) Agree with that sentiment 100%. Ping us when you start the new process. Dreaweaver makes it easy, it'll be referencing the CSS so you can see changes in real time. Night mate. Comments Agree with that sentiment 100%. Ping us when you start the new process. Dreaweaver makes it easy, it'll be referencing the CSS so you can see changes in real time. Night mate.

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 > WebViews and HTML for Mobile

Different fonts for different devices

Title

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments