Custom HTML Screen that renders well on iPhone and iPad?

Discussion Forums > WebViews and HTML for Mobile

Replies: 11 Views: 613

CodeMeNot I hate code! Posts: 92 Reg: Aug 02, 2012 Sydney 1,720	confirm \| cancel 09/08/12 05:23 AM (13 years ago) Custom HTML Screen that renders well on iPhone and iPad? Hi :) So been searching around for ages with no luck. Basically i'm just looking for some HTML code that renders well on iPhone but ALSO on iPad. Currently I have (p.s. I believe this is the part that affects size): <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" /> Currently iPhone is fine :), however on iPad it is small and only uses a fraction of the screen. I read a previous post whereby an app got rejected because the rendering was the same size for iPhone screen. Any ideas, tips, code, friendly banter or words of encouragement appreciated! Thanks, Ben. Title Comments Hi :) So been searching around for ages with no luck. Basically i'm just looking for some HTML code that renders well on iPhone but ALSO on iPad. Currently I have (p.s. I believe this is the part that affects size): <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" /> Currently iPhone is fine :), however on iPad it is small and only uses a fraction of the screen. I read a previous post whereby an app got rejected because the rendering was the same size for iPhone screen. Any ideas, tips, code, friendly banter or words of encouragement appreciated! Thanks, Ben.

ictguy Aspiring developer Posts: 564 Reg: Jun 17, 2011 Mildura, Austra... 15,840	09/08/12 06:52 AM (13 years ago) @CodeMeNot Take a look at the jquery mobile framework - I use it for all my html screens. http://jquerymobile.com/ Hope this helps! Comments @CodeMeNot Take a look at the jquery mobile framework - I use it for all my html screens. http://jquerymobile.com/ Hope this helps!

ATRAIN53 Code is Art Posts: 1755 Reg: Nov 17, 2011 Chicago 26,450	09/08/12 07:56 AM (13 years ago) jquery def rocks for controlling the layouts. best option for complete control. well worth the time to learn and use. lots of killer goodies too that are easy to drop in pages with a few lines of code you can cut/paste, like a simple photo slider... If you don't want to use jquery you can also use plain old css too. You're looking for a 'fluid grid' that will size properly per device and per orientation. I use http://csswizardry.com/inuitcss/ for all my mobile web design. Of all the css grids I have used, this one scales perfectly every time and quickly. I played with a dozen of them to find the right one. inuit is the one. (and hi ictguy!) Comments jquery def rocks for controlling the layouts. best option for complete control. well worth the time to learn and use. lots of killer goodies too that are easy to drop in pages with a few lines of code you can cut/paste, like a simple photo slider... If you don't want to use jquery you can also use plain old css too. You're looking for a 'fluid grid' that will size properly per device and per orientation. I use http://csswizardry.com/inuitcss/ for all my mobile web design. Of all the css grids I have used, this one scales perfectly every time and quickly. I played with a dozen of them to find the right one. inuit is the one. (and hi ictguy!)

ictguy Aspiring developer Posts: 564 Reg: Jun 17, 2011 Mildura, Austra... 15,840	09/09/12 04:01 AM (13 years ago) @ATRAIN53, Umm ... "cooler than a polar bear’s toenails…" - love it! Just when I think I've got this "down pat" you throw up something else to investigate :-)))) In the drupal world (my other passion) "responsive design" is becoming a big thing! I still like jquery mobile because of the way it creates links and buttons. And also because of the awesome jquery theme roller ....http://jquerymobile.com/themeroller/index.php cheers Comments @ATRAIN53, Umm ... "cooler than a polar bear’s toenails…" - love it! Just when I think I've got this "down pat" you throw up something else to investigate :-)))) In the drupal world (my other passion) "responsive design" is becoming a big thing! I still like jquery mobile because of the way it creates links and buttons. And also because of the awesome jquery theme roller ....http://jquerymobile.com/themeroller/index.php cheers

CodeMeNot I hate code! Posts: 92 Reg: Aug 02, 2012 Sydney 1,720	09/09/12 07:38 AM (13 years ago) Thanks so much for the feedback Atrain and ictguy :) Jquery looks quiet nice and I will definitely use to develop my next app I think. Currently all my Custom HTML Screens are complete to I will try jquery and inuitcss next time. I was able to fix the display problem for iPad by changing initial scale to 2.0 instead of 1.0, but now I have the following problem of determining whether its iPad or iPhone. I am trying to create the below scenario in a Custom HTML screen within the head secton: IF (detects ipad) { <meta content="width=device-width; initial-scale=2.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> } Else (assuming its iPhone or iPod touch as it will be only on apple store... for now) { <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> } I think this may be possible off using scripts. I just trying to gather something to paste into the Custom HTML Screen to complete this IF statement. Any ideas? Comments Thanks so much for the feedback Atrain and ictguy :) Jquery looks quiet nice and I will definitely use to develop my next app I think. Currently all my Custom HTML Screens are complete to I will try jquery and inuitcss next time. I was able to fix the display problem for iPad by changing initial scale to 2.0 instead of 1.0, but now I have the following problem of determining whether its iPad or iPhone. I am trying to create the below scenario in a Custom HTML screen within the head secton: IF (detects ipad) { <meta content="width=device-width; initial-scale=2.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> } Else (assuming its iPhone or iPod touch as it will be only on apple store... for now) { <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> } I think this may be possible off using scripts. I just trying to gather something to paste into the Custom HTML Screen to complete this IF statement. Any ideas?

CodeMeNot I hate code! Posts: 92 Reg: Aug 02, 2012 Sydney 1,720	09/09/12 07:50 AM (13 years ago) I tried the following with no luck. Does not seem to recognise the script. Any advice would be great. Im new to HTML. <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <script type="text/javascript"> if(navigator.userAgent.match(/iPad/i)) { <meta content="width=device-width; initial-scale=2.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> } else { <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> } </script> </head> Comments I tried the following with no luck. Does not seem to recognise the script. Any advice would be great. Im new to HTML. <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <script type="text/javascript"> if(navigator.userAgent.match(/iPad/i)) { <meta content="width=device-width; initial-scale=2.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> } else { <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> } </script> </head>

ictguy Aspiring developer Posts: 564 Reg: Jun 17, 2011 Mildura, Austra... 15,840	09/09/12 05:20 PM (13 years ago) Try a search for: javascript detect iphone ipad script I found these that may be worth a try... http://davidwalsh.name/detect-iphone http://www.ajaxera.com/javascript-detect-iphone/ The other option is to have two pages each with the different code and redirect to the appropriate one. Comments Try a search for: javascript detect iphone ipad script I found these that may be worth a try... http://davidwalsh.name/detect-iphone http://www.ajaxera.com/javascript-detect-iphone/ The other option is to have two pages each with the different code and redirect to the appropriate one.

CodeMeNot I hate code! Posts: 92 Reg: Aug 02, 2012 Sydney 1,720	09/10/12 06:51 AM (13 years ago) Finally!!!!!! I got it :) and here it is! Thanks again ictguy. Basically my problem wasn't in recognising the device but how I was treating the meta content. This works fine :) (although on iPad you cannot zoom, but meh!) <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <script language="javascript" type="text/javascript"> if (navigator.userAgent.match(/iPad/i)) { var viewportmeta = document.querySelector('meta[name="viewport"]'); if (viewportmeta) { viewportmeta.content = 'width=device-width; initial-scale=2.0; maximum-scale=2.0; user-scalable=1'; } } </script> </head> Comments Finally!!!!!! I got it :) and here it is! Thanks again ictguy. Basically my problem wasn't in recognising the device but how I was treating the meta content. This works fine :) (although on iPad you cannot zoom, but meh!) <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <script language="javascript" type="text/javascript"> if (navigator.userAgent.match(/iPad/i)) { var viewportmeta = document.querySelector('meta[name="viewport"]'); if (viewportmeta) { viewportmeta.content = 'width=device-width; initial-scale=2.0; maximum-scale=2.0; user-scalable=1'; } } </script> </head>

ATRAIN53 Code is Art Posts: 1755 Reg: Nov 17, 2011 Chicago 26,450	09/10/12 07:25 AM (13 years ago) Perfect! That is exactly how to do it - quick javascript. Wish I had seen your code sample earlier, if I had seen you trying to use a meta tag inside the script, might have saved you some time saying to move it outta there! The zoom - that should work. I think there are options in the Control panel for HTML Document behavior to allow/disaow user interaction - perhaps playing with these settings might get some zoom working? and love the sombereo! Comments Perfect! That is exactly how to do it - quick javascript. Wish I had seen your code sample earlier, if I had seen you trying to use a meta tag inside the script, might have saved you some time saying to move it outta there! The zoom - that should work. I think there are options in the Control panel for HTML Document behavior to allow/disaow user interaction - perhaps playing with these settings might get some zoom working? and love the sombereo!

CodeMeNot I hate code! Posts: 92 Reg: Aug 02, 2012 Sydney 1,720	09/10/12 05:00 PM (13 years ago) Ok good news with the zoom then! this was only testing on iPad simulator so maybe it might be different on the actual device. I will give it a try with document behavior. If it doesn't work, not to worry as the text is quite large. So people will definitely be able to read it :) Thanks again :) (sombrero was quite a drunken night - don't remember to much of that night haha!) Comments Ok good news with the zoom then! this was only testing on iPad simulator so maybe it might be different on the actual device. I will give it a try with document behavior. If it doesn't work, not to worry as the text is quite large. So people will definitely be able to read it :) Thanks again :) (sombrero was quite a drunken night - don't remember to much of that night haha!)

AlanMac Aspiring developer Posts: 2612 Reg: Mar 05, 2012 Esher, UK 37,120	09/28/12 11:13 AM (13 years ago) Probably a bit late, but a bit of CSS to set font sizes for iPad, coupled with your script should work wonders here. Comments Probably a bit late, but a bit of CSS to set font sizes for iPad, coupled with your script should work wonders here.

mysps Code is Art Posts: 2082 Reg: May 14, 2011 Palma 33,320	07/17/13 07:55 AM (12 years ago) Thanks for this post! @CodemeNot your code worked great for me :) Comments Thanks for this post! @CodemeNot your code worked great for me :)

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

Custom HTML Screen that renders well on iPhone and iPad?

Title

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments