Load different png file in html depending on iPhone or iPad?

Get Started | Login

Discussion Forums > WebViews and HTML for Mobile

Replies: 6 Views: 141

mutzy Aspiring developer Posts: 841 Reg: Nov 03, 2010 Medford, MA 9,860	confirm \| cancel 05/10/13 01:05 PM (11 years ago) Load different png file in html depending on iPhone or iPad? Is there a way to make an html file load a different png depending on whether it's running on an iPhone or iPad? I tried adding ~ipad in the file name to see if that would load by default on the ipad but no luck. I'm trying to make a ruler screen that for obvious reasons need to be exact dimensions. It looks great on iPhone but need different image for the iPad. Any suggestions?? josh Title Comments Is there a way to make an html file load a different png depending on whether it's running on an iPhone or iPad? I tried adding ~ipad in the file name to see if that would load by default on the ipad but no luck. I'm trying to make a ruler screen that for obvious reasons need to be exact dimensions. It looks great on iPhone but need different image for the iPad. Any suggestions?? josh

SmugWimp Smugger than thou... Posts: 6316 Reg: Nov 07, 2012 Tamuning, GU 81,410	05/10/13 02:14 PM (11 years ago) //check to see if iPad or which size iPhone and create different frame sizes if that is the case. if([appDelegate.rootApp.rootDevice isIPad]){ // code to show iPad XIB }else { if([UIScreen mainScreen].bounds.size.height == 568) { // code to show iPhone 5 XIB }else{ // code to show iPhone 3/4 XIB } } Would that help any? Cheers! -- Smug Comments //check to see if iPad or which size iPhone and create different frame sizes if that is the case. if([appDelegate.rootApp.rootDevice isIPad]){ // code to show iPad XIB }else { if([UIScreen mainScreen].bounds.size.height == 568) { // code to show iPhone 5 XIB }else{ // code to show iPhone 3/4 XIB } } Would that help any? Cheers! -- Smug

chris1 Code is Art Posts: 3862 Reg: Aug 10, 2012 Austin, TX 50,120	05/10/13 09:01 PM (11 years ago) No, that won't help the HTML file. Your best bet if this is really important is to load different versions of the HTML file depending on the device type. Comments No, that won't help the HTML file. Your best bet if this is really important is to load different versions of the HTML file depending on the device type.

SmugWimp Smugger than thou... Posts: 6316 Reg: Nov 07, 2012 Tamuning, GU 81,410	05/11/13 02:07 AM (11 years ago) oh. Duh. HTML. Sorry. Xcode won't help in HTML... Maybe this can help? http://www.hand-interactive.com/resources/detect-mobile-javascript.htm Cheers! -- Smug Comments oh. Duh. HTML. Sorry. Xcode won't help in HTML... Maybe this can help? http://www.hand-interactive.com/resources/detect-mobile-javascript.htm Cheers! -- Smug

Stobe buzztouch Evangelist Posts: 1528 Reg: Mar 04, 2011 Fredericksburg,... 24,680	05/11/13 05:10 AM (11 years ago) I used a simpler concept when making my DoubleHTML Tool. I simply made the screen load 2 seperate HTML docs depending on the device type. (So you could just duplicated the HTML source, and change out the png files in each) http://idevdepot.com/double-html-tool/ If that sounds like a workable solution, I can see what it would take to update the tool to the 2.0 version of the plugin. -Chris Comments I used a simpler concept when making my DoubleHTML Tool. I simply made the screen load 2 seperate HTML docs depending on the device type. (So you could just duplicated the HTML source, and change out the png files in each) http://idevdepot.com/double-html-tool/ If that sounds like a workable solution, I can see what it would take to update the tool to the 2.0 version of the plugin. -Chris

Rohan Veteran developer Posts: 79 Reg: Mar 12, 2011 London 10,040	05/11/13 06:20 AM (11 years ago) My solution is to use css media querys to load a different picture depending on screen resolution: for example put this in the header of your html file: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <style type="text/css"> /* ----- iPad ----- / @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { h1 { display: block; width: 680px; height: 75px; text-align: center; background: #000 url(ipadpic.png) no-repeat; background-size: 680px 75px; } } / ---- iPhone ---- / @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { h1 { display: block; width: 294px; height: 350px; background: #000 url(iphonepic.png) no-repeat; background-size: 294px 350px; } } } </style> </head> Notice how it displays a different picture as a background image. Play around with the code, have fun! Comments My solution is to use css media querys to load a different picture depending on screen resolution: for example put this in the header of your html file: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <style type="text/css"> / ----- iPad ----- / @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { h1 { display: block; width: 680px; height: 75px; text-align: center; background: #000 url(ipadpic.png) no-repeat; background-size: 680px 75px; } } / ---- iPhone ---- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { h1 { display: block; width: 294px; height: 350px; background: #000 url(iphonepic.png) no-repeat; background-size: 294px 350px; } } } </style> </head> Notice how it displays a different picture as a background image. Play around with the code, have fun!

mutzy Aspiring developer Posts: 841 Reg: Nov 03, 2010 Medford, MA 9,860	05/11/13 06:14 PM (11 years ago) all great ideas! Stobes...I checked out your plugin but I don't have a PC so can't get the software to run. I'll play around with some css and see if I can get something working. Thanks again everyone. Comments all great ideas! Stobes...I checked out your plugin but I don't have a PC so can't get the software to run. I'll play around with some css and see if I can get something working. Thanks again everyone.

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.