| author | Eugene Ostroukhov <eugeneo@symbian.org> |
| Mon, 08 Mar 2010 09:24:25 -0800 | |
| changeset 232 | 22c09a3753c1 |
| parent 229 | 716254ccbcc0 |
| permissions | -rw-r--r-- |
|
229
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
1 |
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
2 |
<!DOCTYPE html |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
3 |
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
4 |
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="Using multiple CSS"/><meta name="abstract" content="If the difference in screen size on the target devices is large (for example, 240 x 320 and 360 x 640), you can use separate CSS files to specify the user interface for each screen size. This also allows you take touch support into consideration. On touch devices, make buttons, text boxes, and other screen controls big enough for users to select them with fingers. On other devices, screen controls can be smaller, because users use the five way navigation pad to move between them."/><meta name="description" content="If the difference in screen size on the target devices is large (for example, 240 x 320 and 360 x 640), you can use separate CSS files to specify the user interface for each screen size. This also allows you take touch support into consideration. On touch devices, make buttons, text boxes, and other screen controls big enough for users to select them with fingers. On other devices, screen controls can be smaller, because users use the five way navigation pad to move between them."/><meta name="DC.Relation" scheme="URI" content="GUID-9EA77434-CC44-429F-BDD3-3AF4357CCF69"/><meta name="DC.Relation" scheme="URI" content="GUID-D54DEFE7-E878-4530-B707-A5388DFE1D9D"/><meta name="DC.Relation" scheme="URI" content="GUID-3DA126B3-12E2-44C8-A009-8D25E7B3F7E6"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-46BD4E18-092D-4CE2-90CF-91F10B2303B0"/><meta name="DC.Language" content="en"/><title>Using multiple CSS </title><script type="text/javascript"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
5 |
function initPage() {}
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
6 |
</script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-46BD4E18-092D-4CE2-90CF-91F10B2303B0">Using multiple CSS</h1><div><p>If the difference in screen size on the target devices is large (for example, 240 x 320 and 360 x 640), you can use separate CSS files to specify the user interface for each screen size. This also allows you take touch support into consideration. On touch devices, make buttons, text boxes, and other screen controls big enough for users to select them with fingers. On other devices, screen controls can be smaller, because users use the five way navigation pad to move between them.</p> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
7 |
<p>Use JavaScript to determine which CSS file to select on a particular device.</p> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
8 |
<p>For an example of using multiple CSS, see <a href="GUID-9F3218D9-2BEA-417C-8017-E05AC749BF84.html#GUID-9F3218D9-2BEA-417C-8017-E05AC749BF84">STEW: supporting different screen sizes</a>.</p> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
9 |
<div><h3>To use multiple CSS</h3><ol> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
10 |
<li id="GUID-D95CBB3F-9AA8-4365-BFDD-443E9C9C64D2"><a name="GUID-D95CBB3F-9AA8-4365-BFDD-443E9C9C64D2"><!----></a><p>Create CSS files that specify styles for different screen sizes.</p><p>For example, <code>style.css</code> to render views on 360 x 640 screens and <code>style_small.css</code> on 240 x 320 screens.</p></li> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
11 |
<li id="GUID-FF41C6FA-3693-4F10-BBE7-9228153039AC"><a name="GUID-FF41C6FA-3693-4F10-BBE7-9228153039AC"><!----></a><p>Add references to the style sheets to the <code>main.html</code> file.</p><pre class="codeblock"><link href="style.css" rel="stylesheet" type="text/css"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
12 |
<link href="style_small.css" rel="stylesheet" type="text/css"> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
13 |
</pre></li> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
14 |
<li id="GUID-60CFAA90-BCE9-4E10-85BD-92EEE7CFE052"><a name="GUID-60CFAA90-BCE9-4E10-85BD-92EEE7CFE052"><!----></a><p>Create JavaScript to select the style sheet according to screen size:</p><pre class="codeblock">// Set the correct stylesheet depending on whether we are running |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
15 |
// on bigger or smaller screens. |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
16 |
Helper.applyCorrectStyles(); |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
17 |
</pre><pre class="codeblock">applyCorrectStyles: function() {
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
18 |
var largeScreen = Helper.isLargeScreen(); |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
19 |
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
20 |
document.styleSheets[0].disabled = !largeScreen; |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
21 |
document.styleSheets[1].disabled = largeScreen; |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
22 |
} |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
23 |
</pre></li> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
24 |
<li id="GUID-484C8698-40DA-4C5F-B647-157FB560835A"><a name="GUID-484C8698-40DA-4C5F-B647-157FB560835A"><!----></a><p>Create JavaScript to determine screen size:</p><pre class="codeblock">isLargeScreen: function() {
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
25 |
var size = this.getScreenSize(); |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
26 |
return ( size.height > Helper.SMALL_SCREEN_TRESHOLD ); |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
27 |
} |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
28 |
|
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
29 |
Helper.SMALL_SCREEN_TRESHOLD = 320; |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
30 |
</pre></li> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
31 |
</ol></div> |
|
716254ccbcc0
Fixed 2046: WRTKit help topics. Fixed 2170: Added support for Web Developer Library. Fixed 1952: Event Trigger icons unreadable
tasneems@symbian.org
parents:
diff
changeset
|
32 |
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html> |