HTML Doc - iOS Device Dependant CSS

Get Started | Login

Discussion Forums > Uncategorized

Replies: 5 Views: 600

Going-Viral Apple Fan Posts: 120 Reg: Jun 13, 2011 Doncaster 1,200	confirm \| cancel 07/05/11 02:10 PM (14 years ago) HTML Doc - iOS Device Dependant CSS Has anyone managed to successfully format a HTML Doc file to deliver different CSS presentation dependant on iOS device? Title Comments Has anyone managed to successfully format a HTML Doc file to deliver different CSS presentation dependant on iOS device?

Going-Viral Apple Fan Posts: 120 Reg: Jun 13, 2011 Doncaster 1,200	07/05/11 02:31 PM (14 years ago) Scratch that never mind, I've figured it out, I used the following if it helps anyone: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta name=viewport content=width=device-width,initial-scale=1,user-scalable=no> <title>Untitled Document</title> <style type=text/css> html{ background-color:#ffffff; height:100%; width:100%; } CSS for iPad / @media all and (min-device-width: 481px) and (max-device-width: 1024px) { .normal { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; font-style: normal; color: #000; } } CSS for iPhone / @media all and (max-device-width: 480px) { .normal { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; color: #000; } } </style> If you set the background colour on each HTML Doc and use themes to set a contrasting screen background colour or screen background image, it really helps with the flip animation on screens. Comments Scratch that never mind, I've figured it out, I used the following if it helps anyone: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta name=viewport content=width=device-width,initial-scale=1,user-scalable=no> <title>Untitled Document</title> <style type=text/css> html{ background-color:#ffffff; height:100%; width:100%; } CSS for iPad / @media all and (min-device-width: 481px) and (max-device-width: 1024px) { .normal { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; font-style: normal; color: #000; } } CSS for iPhone / @media all and (max-device-width: 480px) { .normal { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; color: #000; } } </style> If you set the background colour on each HTML Doc and use themes to set a contrasting screen background colour or screen background image, it really helps with the flip animation on screens.

MGoBlue Apple Fan Posts: 980 Reg: Jun 07, 2011 Gold River, CA 10,600	07/05/11 07:22 PM (14 years ago) Thanks. This is nice. I was just starting to play around with my css to figure it out but you've done it for me. Much appreciated. Comments Thanks. This is nice. I was just starting to play around with my css to figure it out but you've done it for me. Much appreciated.

Going-Viral Apple Fan Posts: 120 Reg: Jun 13, 2011 Doncaster 1,200	07/06/11 02:01 AM (14 years ago) Glad this helped, if you want a to modify presentation further such as orientation driven CSS, please see look at http://snipt.net/jschlick/css3-media-queries-1/ for examples :-) Comments Glad this helped, if you want a to modify presentation further such as orientation driven CSS, please see look at http://snipt.net/jschlick/css3-media-queries-1/ for examples :-)

manutd Aspiring developer Posts: 33 Reg: Apr 21, 2011 California 2,280	10/12/11 07:49 AM (14 years ago) Hi Going-Viral, I need some help in this regard. I tried the way you mentioned. I cut an paste the piece of code you mentioned to a custom html doc but it somehow didnot seem to work. I have no idea about CSS but i gave it a try by cut n paste the above code thinking that it might help. Is there anything else i need to do? Could you please give me some more detail on this? Appreciate your reply Comments Hi Going-Viral, I need some help in this regard. I tried the way you mentioned. I cut an paste the piece of code you mentioned to a custom html doc but it somehow didnot seem to work. I have no idea about CSS but i gave it a try by cut n paste the above code thinking that it might help. Is there anything else i need to do? Could you please give me some more detail on this? Appreciate your reply

Going-Viral Apple Fan Posts: 120 Reg: Jun 13, 2011 Doncaster 1,200	10/13/11 08:11 AM (14 years ago) Do you mean you've added the code to a Custom URL - Web page or HTML Doc? My code works for a HTML Doc, create a HTML Doc element in your app and specify a filename such as test.html. Create a HTML file and drag and drop my code into it, either using Notepad, Dreamweaver, etc... then add your test.html file to your Xcode project under the BT_Docs folder. Clean your project, re build and run and this should work and it should work. Comments Do you mean you've added the code to a Custom URL - Web page or HTML Doc? My code works for a HTML Doc, create a HTML Doc element in your app and specify a filename such as test.html. Create a HTML file and drag and drop my code into it, either using Notepad, Dreamweaver, etc... then add your test.html file to your Xcode project under the BT_Docs folder. Clean your project, re build and run and this should work and it should work.

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.