图像尺寸，移动设备的样式表

Question

i am developing app using worklight that needs to fit in for all mobile devices iphone and android. I am using jquery mobile, css3, html5. But when i add header and buttons in header.. they do not resize to mobile height and width(for eg: galaxy s2). either they are large or too small. can anyone pls suggest how i should approach to create a better stylesheet...

Below is the code:

<div data-role="header">
    <div style="float:left;width:30%">
        <a data-rel="back" href="" data-role="button" data-theme="none">
            <img class="imgback" src="images/Header_left_btn.PNG" />
        </a>
    </div>

    <div style="float:left;width:40%">
        <img src="images/headerText_Lock_icon.PNG" />
    </div>

    <div style="float:left;width:30%">
        <img src="images/logo.PNG" />
    </div>

</div>

Answer 1

Worklight provides a full tutorial which describes supporting multiple form factors using Worklight skins. This presentation includes a full tutorial covering what skins are, how skins work as well as an exercise to test what you have learned. The presentation can be found at the following location:

Using Worklight Skins Presentation: http://public.dhe.ibm.com/software/mobile-solutions/worklight/docs/v610/05_03_Supporting_multiple_form_factors_using_Worklight_skins.pdf