how to customise different versions of html page for iPad & iPhone

Discussion Forums > Uncategorized

Replies: 9 Views: 231

ichigo I hate code! Posts: 74 Reg: Jul 27, 2011 London 740	confirm \| cancel 01/13/12 03:10 PM (14 years ago) how to customise different versions of html page for iPad & iPhone Hey guys, any ideas how to have two versions of an HTML screen that recognises when our user is using iPad or iPhone? particularly for IMG and VIDEO Html tags Title Comments Hey guys, any ideas how to have two versions of an HTML screen that recognises when our user is using iPad or iPhone? particularly for IMG and VIDEO Html tags

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	01/13/12 03:16 PM (14 years ago) Hi, I use the following code to determine which CSS sheets to use, and then create specific CSS for each device: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html> <head> <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> <body> Forum strips out the quotes, of course! Does that help? It actually works very well for me. Mark Comments Hi, I use the following code to determine which CSS sheets to use, and then create specific CSS for each device: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd> <html> <head> <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> <body> Forum strips out the quotes, of course! Does that help? It actually works very well for me. Mark

ichigo I hate code! Posts: 74 Reg: Jul 27, 2011 London 740	01/13/12 03:19 PM (14 years ago) that is perfect - thank you so much for super quick reply Comments that is perfect - thank you so much for super quick reply

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	01/13/12 03:20 PM (14 years ago) Yep! I was excited to get it working...makes it easy to format images, etc, for particular device. Let me know how it works out for you! Mark Comments Yep! I was excited to get it working...makes it easy to format images, etc, for particular device. Let me know how it works out for you! Mark

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	01/13/12 05:42 PM (14 years ago) Mark, will this code work on Android? Comments Mark, will this code work on Android?

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	01/13/12 05:53 PM (14 years ago) I would think it should, since it's just HTML and CSS. As long as the page you are showing is HTML, then it should be good! You probably have to tweak the max-device-width since there are different Android devices out there with different size screens. Much easier for two screens of iOS devices! Mark Comments I would think it should, since it's just HTML and CSS. As long as the page you are showing is HTML, then it should be good! You probably have to tweak the max-device-width since there are different Android devices out there with different size screens. Much easier for two screens of iOS devices! Mark

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	01/13/12 06:01 PM (14 years ago) Yes, diffferent device screen sizes will be a problem. Someone on another post wants retangular buttons, which previously David @ buzztouch had provided a solution to, but with rotation and different screen sizes, we'll have to find a new solution. I'm not big in coding, but will this code work with a button menu screen? The problem is with a fixed grid you could create a retangular button by 'linking two buttons' to the same screen. But with different screen sizes, the grid won't work, unless the grid was fixed. My non-coding solution would be to have different button sizes for different screen sizes, but that would take a lot of testing on different devices. Any thoughts? Comments Yes, diffferent device screen sizes will be a problem. Someone on another post wants retangular buttons, which previously David @ buzztouch had provided a solution to, but with rotation and different screen sizes, we'll have to find a new solution. I'm not big in coding, but will this code work with a button menu screen? The problem is with a fixed grid you could create a retangular button by 'linking two buttons' to the same screen. But with different screen sizes, the grid won't work, unless the grid was fixed. My non-coding solution would be to have different button sizes for different screen sizes, but that would take a lot of testing on different devices. Any thoughts?

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	01/13/12 07:15 PM (14 years ago) This code isn't likely to work on the button screen, because that uses a different method to draw the screen. The code I provided is HTML, and will only work on a screen where the information is provided in HTML. I found and modified this code because I have HTML documents that show on an iPhone and iPad, and I wanted to resize the images based on the device being used...one image in the app, multiple uses! Mark Comments This code isn't likely to work on the button screen, because that uses a different method to draw the screen. The code I provided is HTML, and will only work on a screen where the information is provided in HTML. I found and modified this code because I have HTML documents that show on an iPhone and iPad, and I wanted to resize the images based on the device being used...one image in the app, multiple uses! Mark

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	01/13/12 08:11 PM (14 years ago) I understand, but think retangular buttons everyone wants to know how. Comments I understand, but think retangular buttons everyone wants to know how.

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	01/14/12 10:52 AM (14 years ago) Excerpt from http://globalmoxie.com/blog/designing-for-iphone4-retina-display.shtml For three years, the iPhone came in just one flavor of screen resolution: the 3.5-inch screen was always 320x480 pixels. The new phone doubles the resolution to 640x960 pixels. Suddenly, we’re all designing for two different screens. Fold in the iPad, and you’ve got three iOS screens to juggle. (Hey, it’s better than designing for Android phones, which will have around 60 different devices and form factors by year end, but still... device fragmentation has arrived in its own small way in iOS land.) Comments Excerpt from http://globalmoxie.com/blog/designing-for-iphone4-retina-display.shtml For three years, the iPhone came in just one flavor of screen resolution: the 3.5-inch screen was always 320x480 pixels. The new phone doubles the resolution to 640x960 pixels. Suddenly, we’re all designing for two different screens. Fold in the iPad, and you’ve got three iOS screens to juggle. (Hey, it’s better than designing for Android phones, which will have around 60 different devices and form factors by year end, but still... device fragmentation has arrived in its own small way in iOS land.)

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 > Uncategorized

how to customise different versions of html page for iPad & iPhone

Title

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments