webapp's image size problem

[nickelchen]

when in android development, we should supply three different kinds of
images ,and android would automatically select one according to the
user's device.that's very clear and easy to understand...
but when come to the case of a web app, should i specify different
stylesheets to meet the various kinds of size of devices？and i am
really confused by the <viewport> device-width device-height
stuff...someone can help, please?

[Simon MacDonald]

I wrote a mini blog post on the subject.

http://simonmacdonald.blogspot.com/2012/01/on-eight-day-of-phonegapping-multiple.html

Simon Mac Donald
http://hi.im/simonmacdonald

> --
> You received this message because you are subscribed to the Google
> Groups "phonegap" group.
> To post to this group, send email to phon...@googlegroups.com
> To unsubscribe from this group, send email to
> phonegap+u...@googlegroups.com
> For more options, visit this group at
> http://groups.google.com/group/phonegap?hl=en?hl=en
>
> For more info on PhoneGap or to download the code go to www.phonegap.com

[陈界]

Simon, Thank you for reply. But I cann't direct to that link because of some technical problems..would you please paste the content here, or send it to my email box directly?

2012/1/5 Simon MacDonald <simon.m...@gmail.com>

[Simon MacDonald]

This is another question that comes up on the mailing list frequently, how do you support multiple screen sizes (portrait, landscape, phone, tablet)? Luckily there is a pretty good technique in web development that can be used in your PhoneGap application. It is called responsive web design and there is a book by Ethan Marcotte coincidentally called Responsive Web Designthat I've recommended so often that I feel like I should be getting a kick back from the author (Full disclosure, I don't get a kick back). The book is only $9 and after you are done reading this post you should just go buy it.

In a nutshell, responsive web design uses CSS media queries to determine the width of your display and deliver different layouts based upon screen size. This would allow you to show a single column interface to portrait based phone users of your application but a multi-column approach to landscape table users. Let's run through a quick example.

For our phone users we'll setup our CSS so that our navigation sidebar shows up at the top and the main area of our application is underneath it. That would require some CSS that looks like this:

#wrapper {
            width: 90%;
            min-width: 0;
          }
          #main {
            margin-left: 0;
          }
          #sidebar {
            width: auto;
            float: none;
          }

We'll set our wrapper div to have a width of 90% because we don't want any text going right up against the screen as it make it hard to read. We'll give our main content a left margin of 0px so it is left justified against the wrapper div. For our sidebar we'll make the width auto so all the text will fit. So you app will look like this:

Now for the tablet version of the app you have a lot more screen real estate to work with so you want to have two columns. The left column will be the sidebar for navigation and the right column will be the main content area. Your CSS will look like:

#wrapper {
              width: 80%;
              margin: auto;
            }
            #main {
              margin-left: 40%;
            }
            #sidebar {
              width: 40%;
              float: left;
            }

The first thing you will notice in the CSS is that the wrapper div width is now 80% as we have more screen to work with so we can pad the sides a bit more. The main div is going to float over to 40% of the width of the wrapper div and the sidebar will be 40% of the wrapper div floating to the left side. And your app would look like this:

So that is all well and good but how does our app choose which version of the CSS to use depending on if it is running on a phone or tablet. Well that is the magic of CSS media queries. We'll wrap up our CSS with:

@media all and (max-width: 800px) { ... }

for the phone version of the CSS and:

@media all and (min-width: 801px) { ... }

for the tablet version. Simply screens up to 800px will get the phone version of the CSS and any screen over 800px wide will get the tablet version.

Here is a full HTML file for you to test out.

<!DOCTYPE HTML>

<html>

  <head>

    <meta name="viewport" content="user-scalable=no" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <title>PhoneGap</title>

      <style type="text/css">

        @media all and (min-width: 801px) {

            #wrapper {

              width: 80%;

              margin: auto;

            }


            #main {


              margin-left: 40%;

            }


            #sidebar {


              width: 40%;

              float: left;

            }


        }
        @media all and (max-width: 800px) {

          #wrapper {

            width: 90%;

            min-width: 0;

          }


          #main {


            margin-left: 0;


          }
          #sidebar {

            width: auto;

            float: none;

          }


        }
      </style>

      <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>      

      <script type="text/javascript" charset="utf-8">

     


    function onBodyLoad() { 


        document.addEventListener("deviceready",onDeviceReady,false); 

    };


    
    // PhoneGap is ready

    //

    function onDeviceReady(){

        console.log("Width = " + window.innerWidth);

        console.log("Height = " + window.innerHeight);

    }


  </script>


  </head>


  <body onload="onBodyLoad();">

    <div id="wrapper">

        <div id="sidebar">

            sidebar


        </div>


        <div id="main">

            main


        </div>


    </div>  


  </body>


</html>

view rawrwd.htmlThis Gist brought to you by GitHub.

Interestingly enough for Android 3.2 and greater they've adopted a similar technique to responsive web design to handle multiple screen sizes on Android.

Simon Mac Donald
http://hi.im/simonmacdonald

[陈界]

Thanks Simon~~

2012/1/5 Simon MacDonald <simon.m...@gmail.com>