CSS for Handheld Devices

[davej]

I am experimenting with a page intended for a mobile device. I have set up...

<style media="screen">#container {width: 800px;margin: 0 auto;}#mapCanvas {width: 800px;height: 500px;border-style: solid;border-width: 1px;margin: 22px 0;}</style><style media="handheld, only screen and (max-device-width: 480px)">#container {width: 100%;}#mapCanvas {width: 100%;height: 200px;border-style: solid;border-width: 2px;margin: 22px 0;}</style><style>...</style>

Is that going to work or not? Thanks

[knystrom18]

Can you test it? Without HTML for the CSS to act upon, it's hard for me to tell for sure. Looks okay for me though...

Edited December 11, 2012 by Coaxsist

[DarkxPunk]

You doing just iPhone/iPad? If so I could help, I am working on that too.

[davej]

I would like to also test an Android phone but I don't have one available. I have occasional access to an iPhone. My test page is here: http://www.stlnetwork.net/geomap/default.html

[DarkxPunk]

Ofher than the size, it functions well. Message me on Skype and we can backandforth if you like. Otherwise I will post some CSS later.

[davej]

Ofher than the size, it functions well. Message me on Skype and we can backandforth if you like. Otherwise I will post some CSS later.

I made it taller than the screen so that I could have a large map and scroll down to look at the data only if I wanted to, however I thought the map looked slightly off center.

[DarkxPunk]

The CSS for iPhones is fairly simple, idk about android though. I would also consider using php to address each type of device, but for the simple solution.First add in your header the following:

<meta name="viewport" content="width=device-width; minimum-scale=1.0; maximum-scale=1.0; user-scalable=0;"><meta name="apple-mobile-web-app-capable" content="yes"><link href="css/iOS.css" type="text/css" rel="stylesheet">

Then for your CSS: Note - For the iPhone you can simply use auto width if you wish.

/* iPad Portrait - Main container's width must be within 768px */@media screen and (orientation:portrait){	#wrap {	width: 724px;	}}/* iPad Landscape - Main container's width must be within 1024px */@media screen and (orientation:landscape){	#wrap {	width: 1000px;	}}/* iPhone Portrait - Main container's width must be within 320px */@media screen and (max-width: 320px){	#wrap {		width: 310px;	}}/* iPhone Landscape - Main container's width must be within 480px */@media screen and (min-width: 321px) and (max-width: 480px){	#wrap {		width: 470px;	}}

Now the CSS for android is similar to iPhone, but I honestly have no interest building for those inconsistent devices.

[davej]

Looks interesting. I did a little further testing on my page and it failed miserably. I guess I need to implement your approach. I wonder if there is a table somewhere documenting all of the common mobile device screen sizes? I wonder about simply using percentages to set the page up. That might be easiest if it will work correctly. All that is generally needed is a set of screen-width decision points regarding how many columns you would want to set up.

Edited December 28, 2012 by davej

[davej]

I just read that iPhones are "not" handheld. http://blog.tomgibar...or-css-handheld So I guess after looking through these: http://www.w3.org/TR...3-mediaqueries/http://developer.app...rioniPhone.htmlhttp://cssmediaqueries.com/ one scheme might be...

@media screen and (max-device-width : 400px)  { /* older phones */...}@media screen and (min-device-width : 401px) and (max-device-width : 500px)  { /* iPhone & S3 */...}@media screen and (min-device-width: 501px) and (max-device-width : 800px) { /* tablets */...}@media screen and (min-device-width : 801px) { /* desktops */...}

But do I need the prefix "only" ?

Edited December 29, 2012 by davej

[DarkxPunk]

Well the reasoning for not using handheld is justified. Either way. I would not do it that way. Though it may work I think it's better to use php to define the proper CSS files.Think about it like this, most older phones people don't use to access the net. So it's not worth developing for them, than android can be a bit of a pain to get the CSS media queries to work, I tried but gave up. Sadly of course android is on so many screen sizes so its ###### to develop for them. I personally leave android in the dark, they are not worth it. The statistics even show so few android users actually use the web, it's funny.Use your method if you wish but I would use php to actually define the CSS file. Leave older phones and android in the dark, that's about it. Let me know what you end up doing. Feel free to Skype me if you wanna chit chat.

[davej]

Using width: 100% seems to work for iPhones but not Android. In fact I don't understand the Android pixel ratios. http://developer.android.com/guide/webapps/targeting.html

[DarkxPunk]

That's the ###### of developing for android. See why I don't bother? Stick with developing for iOS.

[davej]

From my informal look around the room yesterday I would guess that that Android was probably 60% of the room and IPhone was 40%, so I had better learn how to handle basic Android css. I need to at least set the body width correctly.

[DarkxPunk]

Here: http://gs.statcounter.com/#mobile_browser-na-monthly-201112-201212Go ahead if you really want to, but concider who your market it.

[davej]

Ah, see, according to your thing they are about even here 42% to 37%. Maybe I just need to divide the width by the pixel ratio? Or something? --Edit-- I looked at a different Android phone this evening at the displayed width looked correct, so it is confusing.

Edited January 4, 2013 by davej