Different Sizes iphone vs ipad Redux

Discussion Forums > Images, Documents, File Locations

Replies: 9 Views: 107

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	confirm \| cancel 03/22/12 08:08 PM (12 years ago) Different Sizes iphone vs ipad Redux Based on help in a previous thread, I've put these lines in a htm file to change the text size depending upon whether I'm on an ipad or iphone. <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> I then have two css files, iphone.css and ipad-portrait.css which have DIFFERENT font percentages. However, when the simulator runs the app on the iphone, it will use the percentage in iphone.css only if the second line above linking to ipad-portrait.css is NOT put in. If both are in, as above, the htm file choose the second line (or, I assume, reads the first and then goes to the second to countermand the first) and my text will be in the percentage in the ipad-portrait.css file. Something is amiss in these two lines, unless it won't work in the simulator and only works with the actual devices. I'm not able to use the devices yet though if you think that's the cause, I'll be able to try it tomorrow. What do you think? Title Comments Based on help in a previous thread, I've put these lines in a htm file to change the text size depending upon whether I'm on an ipad or iphone. <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> I then have two css files, iphone.css and ipad-portrait.css which have DIFFERENT font percentages. However, when the simulator runs the app on the iphone, it will use the percentage in iphone.css only if the second line above linking to ipad-portrait.css is NOT put in. If both are in, as above, the htm file choose the second line (or, I assume, reads the first and then goes to the second to countermand the first) and my text will be in the percentage in the ipad-portrait.css file. Something is amiss in these two lines, unless it won't work in the simulator and only works with the actual devices. I'm not able to use the devices yet though if you think that's the cause, I'll be able to try it tomorrow. What do you think?

MGoBlue Apple Fan Posts: 980 Reg: Jun 07, 2011 Gold River, CA 10,600	03/22/12 08:34 PM (12 years ago) I found using a javascript works better for me. Here's what I've been using successfully: <script type="text/javascript"> if((navigator.userAgent.match(/iPad/i))) { document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"ipadstyle.css\" charset=\"utf-8\" \/>"); } else if(navigator.userAgent.match(/iPhone/i)) { document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"iphonestyle.css\" charset=\"utf-8\" \/>"); } else { document.write("<link type=\"text\/css\" rel=\"stylesheet\" href=\"style.css\" \/>"); } </script> Comments I found using a javascript works better for me. Here's what I've been using successfully: <script type="text/javascript"> if((navigator.userAgent.match(/iPad/i))) { document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"ipadstyle.css\" charset=\"utf-8\" \/>"); } else if(navigator.userAgent.match(/iPhone/i)) { document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"iphonestyle.css\" charset=\"utf-8\" \/>"); } else { document.write("<link type=\"text\/css\" rel=\"stylesheet\" href=\"style.css\" \/>"); } </script>

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/22/12 08:41 PM (12 years ago) MGoBlue, I know absolutely nothing about javascript. Does this script go directly into the html file? And if so, where (eg before body at end of head)? And do I also then have to put in BT_DOCS the ipadstyle.css and iphonestyle.css files as I have the ones I mentioned in my question? Thanks. Comments MGoBlue, I know absolutely nothing about javascript. Does this script go directly into the html file? And if so, where (eg before body at end of head)? And do I also then have to put in BT_DOCS the ipadstyle.css and iphonestyle.css files as I have the ones I mentioned in my question? Thanks.

MGoBlue Apple Fan Posts: 980 Reg: Jun 07, 2011 Gold River, CA 10,600	03/22/12 08:44 PM (12 years ago) Put it between the <head> and </head> sections. See below: <!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 content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>Meet Ashley</title> <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" name="viewport" /> <script type="text/javascript"> if((navigator.userAgent.match(/iPad/i))) { document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"ipadstyle.css\" charset=\"utf-8\" \/>"); } else if(navigator.userAgent.match(/iPhone/i)) { document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"iphonestyle.css\" charset=\"utf-8\" \/>"); } else { document.write("<link type=\"text\/css\" rel=\"stylesheet\" href=\"style.css\" \/>"); } </script> </head> <body> Comments Put it between the <head> and </head> sections. See below: <!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 content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>Meet Ashley</title> <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" name="viewport" /> <script type="text/javascript"> if((navigator.userAgent.match(/iPad/i))) { document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"ipadstyle.css\" charset=\"utf-8\" \/>"); } else if(navigator.userAgent.match(/iPhone/i)) { document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"iphonestyle.css\" charset=\"utf-8\" \/>"); } else { document.write("<link type=\"text\/css\" rel=\"stylesheet\" href=\"style.css\" \/>"); } </script> </head> <body>

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/22/12 08:55 PM (12 years ago) Thanks. Don't know why I keep getting repeats of my posts at times. Anyway, do the files iphonestyle.css and ipadstyle.css get put in BT_DOCS as I assume? Comments Thanks. Don't know why I keep getting repeats of my posts at times. Anyway, do the files iphonestyle.css and ipadstyle.css get put in BT_DOCS as I assume?

MGoBlue Apple Fan Posts: 980 Reg: Jun 07, 2011 Gold River, CA 10,600	03/22/12 09:00 PM (12 years ago) Yes. Files go in the BT_Docs folder. As for the html, you can either use an html file or the custom html feature of the BT server. Custom html is what I've been using and it works great. Also,you can name your css files whatever you want, I just happen to use ipadstyle.css and iphonestyle.css. Comments Yes. Files go in the BT_Docs folder. As for the html, you can either use an html file or the custom html feature of the BT server. Custom html is what I've been using and it works great. Also,you can name your css files whatever you want, I just happen to use ipadstyle.css and iphonestyle.css.

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/22/12 09:16 PM (12 years ago) OK, will give it a try tomorrow. Thanks. Comments OK, will give it a try tomorrow. Thanks.

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	03/22/12 10:15 PM (12 years ago) Good stuff! Thanks @MGoBlue for another way to address a sticky problem! Mark Comments Good stuff! Thanks @MGoBlue for another way to address a sticky problem! Mark

stevek Aspiring developer Posts: 808 Reg: Dec 24, 2011 great neck 8,080	03/23/12 06:06 AM (12 years ago) MGoBLue, Thank, it worked very well. Just one last question. Why that last "else" statement? It seems to be for circumstances when you're not using either an iphone or ipad. If I've written the app for one or the other, do I really need it? Is it for the ipod touch? Comments MGoBLue, Thank, it worked very well. Just one last question. Why that last "else" statement? It seems to be for circumstances when you're not using either an iphone or ipad. If I've written the app for one or the other, do I really need it? Is it for the ipod touch?

MGoBlue Apple Fan Posts: 980 Reg: Jun 07, 2011 Gold River, CA 10,600	03/23/12 08:47 AM (12 years ago) @stevek - Yes. You are correct. I've just left it in from the original code I found. In theory, it should never get called because of the two device types. Comments @stevek - Yes. You are correct. I've just left it in from the original code I found. In theory, it should never get called because of the two device types.

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 > Images, Documents, File Locations

Different Sizes iphone vs ipad Redux

Title

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments