davej Posted December 10, 2012 Share Posted December 10, 2012 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 Link to comment Share on other sites More sharing options...
knystrom18 Posted December 11, 2012 Share Posted December 11, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 11, 2012 Share Posted December 11, 2012 You doing just iPhone/iPad? If so I could help, I am working on that too. Link to comment Share on other sites More sharing options...
davej Posted December 12, 2012 Author Share Posted December 12, 2012 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 Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 12, 2012 Share Posted December 12, 2012 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. Link to comment Share on other sites More sharing options...
davej Posted December 12, 2012 Author Share Posted December 12, 2012 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. Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 14, 2012 Share Posted December 14, 2012 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. Link to comment Share on other sites More sharing options...
davej Posted December 16, 2012 Author Share Posted December 16, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
davej Posted December 29, 2012 Author Share Posted December 29, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 30, 2012 Share Posted December 30, 2012 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. Link to comment Share on other sites More sharing options...
davej Posted January 2, 2013 Author Share Posted January 2, 2013 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 Link to comment Share on other sites More sharing options...
DarkxPunk Posted January 2, 2013 Share Posted January 2, 2013 That's the ###### of developing for android. See why I don't bother? Stick with developing for iOS. Link to comment Share on other sites More sharing options...
davej Posted January 2, 2013 Author Share Posted January 2, 2013 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. Link to comment Share on other sites More sharing options...
DarkxPunk Posted January 3, 2013 Share Posted January 3, 2013 Here: http://gs.statcounter.com/#mobile_browser-na-monthly-201112-201212Go ahead if you really want to, but concider who your market it. Link to comment Share on other sites More sharing options...
davej Posted January 3, 2013 Author Share Posted January 3, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now