canmove, Confirmed users, Bureaucrats and Sysops emeriti
2,798
edits
Mobile/Fennec/Extensions/Layout: Difference between revisions
Mobile/Fennec/Extensions/Layout (view source)
Revision as of 05:02, 20 October 2010
, 20 October 2010no edit summary
MarkFinkle (talk | contribs) (Created page with 'Designing a portable application to run on many different mobile devices is a challenge. Screen sizes and pixel densities are different, making it difficult to create single amaz…') |
MarkFinkle (talk | contribs) No edit summary |
||
| Line 10: | Line 10: | ||
Here is some example CSS for toggling between large and small screens/densities. As you can see, 400px is used as a cutoff: | Here is some example CSS for toggling between large and small screens/densities. As you can see, 400px is used as a cutoff: | ||
<pre | <pre> | ||
/* high-res screens */ | /* high-res screens */ | ||
@media all and (min-device-width: 401px) { | @media all and (min-device-width: 401px) { | ||
| Line 26: | Line 26: | ||
} | } | ||
} | } | ||
</pre> | |||
==Orientation/Rotation== | ==Orientation/Rotation== | ||
The same kind of example, but this time for changing the direction of some UI elements when rotating the screen: | The same kind of example, but this time for changing the direction of some UI elements when rotating the screen: | ||
<pre | <pre> | ||
@media (orientation: landscape) { | @media (orientation: landscape) { | ||
#panel-controls { | #panel-controls { | ||
| Line 47: | Line 47: | ||
} | } | ||
} | } | ||
</pre> | |||
Fennec also uses the XUL <code><hbox></code> wrapping to allow elements to flow into multiple rows if there is not enough space to hold them in a single row: | Fennec also uses the XUL <code><hbox></code> wrapping to allow elements to flow into multiple rows if there is not enough space to hold them in a single row: | ||
<pre | <pre> | ||
#my-hbox { | #my-hbox { | ||
display: block; | display: block; | ||
} | } | ||
</pre> | |||
When developing add-ons for Fennec, please keep these situations in mind. Use the [http://mxr.mozilla.org/mobile-browser/ Fennec code] as an example of how you can create a great user experience, regardless of screen size or orientation. | When developing add-ons for Fennec, please keep these situations in mind. Use the [http://mxr.mozilla.org/mobile-browser/ Fennec code] as an example of how you can create a great user experience, regardless of screen size or orientation. | ||