Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Web application site fix (Part - 34) #2015

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Web application site fix (Part - 34) #2015

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions docs/application/web/guides/w3c/ui/media-query.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

Media queries allow you to [apply the CSS differently according to conditions](#media-query-conditions) based on the media type (type of device) and media features (viewport status). Previously, you were able to use the media type only and create Web services with fixed layouts. However, smart phones, tablets, and other devices with various resolutions require a liquid layout. HTML5 now makes various characteristics and conditional defining possible, and can be used to implement responsive Web design (RWD), which is a [liquid layout](#creating-a-liquid-layout) that mainly reacts according to the device resolution.

You can use media queries in 3 ways:
You can use media queries in the following 3 ways:

- In CSS

Expand All @@ -12,7 +12,7 @@ You can use media queries in 3 ways:
@media only screen and (max-width: 480px) {styles}
```

> **Note**
> [!NOTE]
> This approach is popular since it can reduce style overlapping; however, if all the styles are applied to 1 CSS, the maintenance work efficiency decreases.

- In an `@import` rule in CSS
Expand All @@ -31,18 +31,18 @@ You can use media queries in 3 ways:
<link rel="stylesheet" media="all and (max-width: 480px)" href="example.css">
```

> **Note**
> [!NOTE]
> The disadvantage of this approach is that every time the condition is expanded, the HTML file must be edited. However, since this approach only imports the CSS files that match the condition, the file transmission amount can be reduced.

For more information on the CSS priorities when different media queries are used, see [Media Query Priorities](#media-query-priorities).

## Media Query Conditions
## Media query conditions

You can define the following conditions for the media queries:

- Combination and relevancy

You can combine multiple conditions into 1 Boolean query with the `and` operator. To define a negative condition (something not being relevant), use the `not` operator.
You can combine multiple conditions into 1 Boolean query with the `and` operator. To define a negative condition (something not being relevant), use the `not` operator:

```
@media not screen and (min-width: 320px), screen and (max-width: 480px) {
Expand All @@ -52,7 +52,7 @@ You can define the following conditions for the media queries:

- Viewport width

You can define the query to match to a specific viewport width range using the `min-width` and `max-width` attributes.
You can define the query to match to a specific viewport width range using the `min-width` and `max-width` attributes:

```
@media all and (min-width: 320px) and (max-width: 480px) {
Expand All @@ -64,7 +64,7 @@ You can define the following conditions for the media queries:

The `height` attribute refers to restoring the viewport's height, and the `device-height` attribute refers to restoring the resolution set on the device.

The same difference applies to the `width` and `aspect-ratio` attributes, which can assign 'device-'.
The same difference applies to the `width` and `aspect-ratio` attributes, which can assign 'device-':

```
@media screen and (min-device-height: 700px) {
Expand All @@ -79,7 +79,7 @@ You can define the following conditions for the media queries:

- Device aspect ratio

You can use the `device-aspect-ratio` attribute to check the width-length ratio (aspect ratio) of the printing device.
You can use the `device-aspect-ratio` attribute to check the width-length ratio (aspect ratio) of the printing device:

```
@media all and (device-aspect-ratio: 9/16) and (orientation: portrait),
Expand All @@ -88,10 +88,10 @@ You can define the following conditions for the media queries:
}
```

> **Note**
> [!NOTE]
> The device aspect ratio is a reliable way to distinguish the portrait and landscape modes of a smart phone. However, because the aspect ratio of all the devices has to be specified, a precise rule is hard to define. (Currently wildly used screen ratios are 15:9, 16:10, 16:9, 3:2, and 4:3, but devices with other screen ratios may be added in the future.)

## Media Query Priorities
## Media query priorities

When multiple media queries and conditions are defined, CSS is applied with the following priorities:

Expand Down Expand Up @@ -171,7 +171,7 @@ The CSS is applied based on the viewport:
- The `a.css` file is not imported.
- The `b.css` file is applied (based on `content: "b.css : width: 768px ~ 1024px"`).

## Creating a Liquid Layout
## Create a liquid layout

You can use media queries to determine the styles to be used in a Web document. The following example creates a simple Web document with a liquid layout that organically changes according to the device resolution to show an optimized layout on both portrait and landscape modes:

Expand All @@ -195,7 +195,7 @@ You can use media queries to determine the styles to be used in a Web document.
</div>
```

2. Define basic styles for the page, using a flexible box (in [mobile](../../../api/latest/w3c_api/w3c_api_m.html#flexi), [wearable](../../../api/latest/w3c_api/w3c_api_w.html#flexi), and [TV](../../../api/latest/w3c_api/w3c_api_tv.html#flexi) applications) and multi-column (in [mobile](../../../api/latest/w3c_api/w3c_api_m.html#multicolumn) and [TV](../../../api/latest/w3c_api/w3c_api_tv.html#multicolumn) applications only) layout with 2 columns. (The following figure applies to mobile applications only.)
2. Define basic styles for the page, using a flexible box (in [mobile](../../../api/latest/w3c_api/w3c_api_m.html#flexi), [wearable](../../../api/latest/w3c_api/w3c_api_w.html#flexi), and [TV](../../../api/latest/w3c_api/w3c_api_tv.html#flexi) applications) and multi-column (in [mobile](../../../api/latest/w3c_api/w3c_api_m.html#multicolumn) and [TV](../../../api/latest/w3c_api/w3c_api_tv.html#multicolumn) applications only) layout with 2 columns: (The following figure applies to mobile applications only.)

```
.container {
Expand Down Expand Up @@ -254,14 +254,14 @@ You can use media queries to determine the styles to be used in a Web document.
@media print {<!--Specific layout-->}
```

### Source Code
### Source code

For the complete source code related to this use case, see the following files:

- [liquid_layout_2.html](http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries)
- [logo.png](http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries)
- [liquid_layout_2.html](http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries){:target="_blank"}
- [logo.png](http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/media_queries){:target="_blank"}

## Related Information
## Related information
* Dependencies
- Tizen 2.4 and Higher for Mobile
- Tizen 2.3.1 and Higher for Wearable
Expand Down
52 changes: 26 additions & 26 deletions docs/application/web/guides/w3c/ui/multiple-screens.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,49 +10,49 @@ Tizen provides the [UI scalability](#ui-scalability) resolution feature, which a

To optimize images used in Web applications, images based on a single resource can be used in [various resolutions](#image-resolution-optimization).

## Key Concepts
## Key concepts

Before building a Web application for multiple resolutions, make sure you are familiar with the following [W3C](http://www.w3.org/) Web content scaling standards, which must be taken into account when developing Web applications:
Before building a Web application for multiple resolutions, make sure you are familiar with the following [W3C](http://www.w3.org/){:target="_blank"} Web content scaling standards, which must be taken into account when developing Web applications:

- Viewport meta tag
- CSS media query

### Viewport Meta Tag
### Viewport meta tag

A viewport defines the application area that displays the Web page content.

In a Web browser, the viewport size depends on the browser window size. If the viewport is smaller than the Web content size, horizontal and vertical scrollbars are displayed for page navigation. The Web browser viewport does not support the zoom feature. However, in a mobile Web browser, there are no window scrollbars and the viewport supports the zoom feature.

The [viewport meta tag](http://www.w3.org/TR/mwabp/#bp-viewport) enables you to customize the viewport size and zoom levels in a majority of mobile Web browsers. Using this tag, you can set the width, height, initial scale, and scale range for Web pages.
The [viewport meta tag](http://www.w3.org/TR/mwabp/#bp-viewport){:target="_blank"} enables you to customize the viewport size and zoom levels in a majority of mobile Web browsers. Using this tag, you can set the width, height, initial scale, and scale range for Web pages.

To use the viewport meta tag while developing Web applications, you must note the following:

- The `device-height` and `device-width` attributes defined in the viewport meta tag are not the same as the real device width and height in pixels.
- Using the viewport meta tag, the Web browsers of different devices display the same content with different layout size and scale factor. The scale factor is calculated using the device pixel ratio (DPR).

### CSS Media Query
### CSS media query

The [CSS media query](http://www.w3.org/TR/css3-mediaqueries/) enables you to set conditions for particular media features and types to apply different CSS files for the application content. For Web content scaling, you can use the CSS media query to, for example:
The [CSS media query](http://www.w3.org/TR/css3-mediaqueries/){:target="_blank"} enables you to set conditions for particular media features and types to apply different CSS files for the application content. For Web content scaling, you can use the CSS media query to, for example:

- Define the image resource to be used based on the screen dots per inch (DPI) ratio.
- Determine the CSS layout to be used based on the screen width.

## UI Scalability
## UI scalability

With UI scalability, you can support multiple screen resolutions in a single Tizen Web application. Tizen automatically converts and translates the size and position values that are defined in the application's logical resolution to the physical resolution at runtime. The Tizen Advanced UI (TAU) uses the [viewport meta tag](#viewport-meta-tag) to fit the Web page into the device screen, and the `rem` unit to determine the size of the Tizen Web UI components.

### Setting the Viewport
### Set the viewport

Tizen devices support a variety of screen resolutions and dots per inch (DPI) values. If the viewport meta tag is not defined, TAU uses the default viewport width and scale factor. This ensures that Web content layout varies between different screen resolutions.

In the following example, the viewport width is set to `device-width`, which is determined by the width of the Tizen device. The `device-width` value is retrieved to set similar virtual DPI values and to display UI components with similar physical sizes across all devices. (TAU uses the example value by default, if no other viewport value is defined.)
In the following example, the viewport width is set to `device-width`, which is determined by the width of the Tizen device. The `device-width` value is retrieved to set similar virtual DPI values and to display UI components with similar physical sizes across all devices: (TAU uses the example value by default, if no other viewport value is defined.)

```
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
```

If the viewport width is set to `device-width`, the width and scale factor values are calculated by the Web browser. The following table shows different layout sizes and scale factors of the Tizen Web site (`http://tizen.org`) on different devices with the viewport width set to `device-width`.
If the viewport width is set to `device-width`, the width and scale factor values are calculated by the Web browser. The following table shows different layout sizes and scale factors of the Tizen Web site (`http://tizen.org`) on different devices with the viewport width set to `device-width`:

```
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
Expand All @@ -65,21 +65,21 @@ If the viewport width is set to `device-width`, the width and scale factor value
| 720 x 1280 | 306 | 320 | ![captured screen1](./media/captured_screen1.png) | 360 px | 2.0 |
| 480 x 800 | 218 | 240 | ![captured screen2](./media/captured_screen2.png) | 320 px | 1.5 |

### Working with Tizen Web Winsets
### Work with Tizen Web winsets

The default sizes of Tizen Web winsets (such as Popup, Button, and Checkbox) are designed based on the reference viewport DPI of 160. Therefore, these winsets are of similar sizes on any Tizen device if the viewport width is set to `device-width`.

If you manually set the viewport width of your application to a fixed value, the Tizen Web winsets may not fit appropriately in the application. To avoid the problem, Tizen Web winsets use the `rem` unit for the winset length, which depends on the base font size of the winset. Each Tizen Web winset theme has its own base font size, and the `<html>` element font size is also set to the base font size. If the viewport width is set to a fixed value, this base font size is recalculated and set to the `<html>` element to adjust the Tizen Web winset sizes accurately.

## Creating Applications Supporting Multiple Screens
## Create applications supporting multiple screens

To create an application that supports multiple screen sizes, you must consider the following while coding your application:

- Configuring the viewport
- Optimizing resources
- Creating screen resolution-independent UI

### Configuring the Viewport
### Configure the viewport

To use UI scalability in your application, set the `viewport` meta tag while [creating a Web application project](../../../tutorials/process/app-dev-process.md) in Tizen Studio. To configure the viewport in the Tizen Web applications, add the `viewport` meta tag in the `<head>` section of the `index.html` file:

Expand All @@ -89,7 +89,7 @@ To use UI scalability in your application, set the `viewport` meta tag while [cr
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
```

### Optimizing Resources
### Optimize resources

By default, the Tizen Advanced UI (TAU) consists of the HD Web winsets. The winset scale is lowered for lower screen resolution devices. To optimize resources for different screen resolutions and devices, use the [CSS media query](#css-media-query) for different resolutions available in Tizen. You can use CSS media queries in the HTML or CSS files.

Expand Down Expand Up @@ -132,11 +132,11 @@ You can also set different layout and resources for the portrait and landscape v
}
```

### Creating Screen Resolution-independent UI
### Create screen resolution-independent UI

The Tizen base font size is 22 px. This base font size value varies based on the device screen resolution. However, to create a screen resolution-independent UI, the Web browser engine renders the base font size as a logical pixel size instead of a physical pixel size.

## Image Resolution Optimization
## Image resolution optimization

In Web applications, optimization of applications for various platforms (regarding devices, OS, and resolution) is efficient.

Expand All @@ -146,7 +146,7 @@ Images can be used in Web applications in the following ways:

- `IMG` element linking images directly to HTML
- CSS `background` property expressing images as a background in HTML
- [SVG (Scalable Vector Graphics)](../graphics/svg.md), [Canvas](../graphics/canvas.md), and [WebGL&trade;](http://www.khronos.org/registry/webgl/specs/latest/) APIs implementing graphics in HTML
- [SVG (Scalable Vector Graphics)](../graphics/svg.md), [Canvas](../graphics/canvas.md), and [WebGL&trade;](http://www.khronos.org/registry/webgl/specs/latest/){:target="_blank"} APIs implementing graphics in HTML

When selecting an option from the list above, consider the type of the image resource you are going to use.

Expand Down Expand Up @@ -181,7 +181,7 @@ The image color is expressed based on pixels. Therefore, the higher resolution a
- 300 x 200 px: 39 KB
- 300 x 200 px: 15 KB

Current full HD displays have a resolution that is 1.5 to 2 times bigger than the actual screen size. The image quality is guaranteed if you size images as 2 times bigger than their original size.
Current full HD displays have a resolution that is 1.5 to 2 times bigger than the actual screen size. The image quality is guaranteed if you size images as 2 times bigger than their original size:

```
img {
Expand All @@ -195,7 +195,7 @@ img {

### Icons

Icons generally have a fixed size. Size icon images as 2 times bigger than their original size. Using the CSS3 `background-size` property, you can add an image with the size of, for example, 40 x 40 px, compressed as 20 x 20 px.
Icons generally have a fixed size. Size icon images as 2 times bigger than their original size. Using the CSS3 `background-size` property, you can add an image with the size of, for example, 40 x 40 px, compressed as 20 x 20 px:

```
.prev_icon, .next_icon {
Expand All @@ -219,7 +219,7 @@ When multiple icons are used on a page, all the image files are called separatel

![Calling each of image separately](./media/calling_img_sep.png)

You can use the sprite image technique (grouping multiple images as one and showing the only desired images defined with the `background-position` property) to noticeably reduce the page loading speed without any loss in quality of the image, as the following example shows.
You can use the sprite image technique (grouping multiple images as one and showing the only desired images defined with the `background-position` property) to noticeably reduce the page loading speed without any loss in quality of the image, as the following example shows:

```
.prev_icon, .next_icon {
Expand All @@ -240,13 +240,13 @@ You can use the sprite image technique (grouping multiple images as one and show

![Network speed when using sprite image](./media/network_speed_sprite.png)

### Animated Images
### Animated images

Animated images can be created in various formats and with many tools, such as GIF, JavaScript, Canvas, and SVG.

To create a simple and repetitive animation effect (such as the following JAVA mascot) as effectively as possible, use GIF images, JavaScript, or the CSS3 `animation` attribute.

**Figure: JAVA mascot character in GIF (source: http://lea.verou.me)**
**Figure: JAVA mascot character in GIF (source: http://lea.verou.me){:target="_blank"}**

![JAVA mascot character in GIF](./media/mascot.gif)

Expand All @@ -257,7 +257,7 @@ The following sections compare the network capacity usage and timeline of the fo
- [CSS3 animation](#css3)

<a name="gif"></a>
#### GIF Animation
#### GIF animation

Using GIF animation, the resource usage is as follows:

Expand All @@ -280,7 +280,7 @@ Using GIF animation, the resource usage is as follows:
GIF animation can be created in various resolutions without quality loss when you use the option introduced in [Photos](#photos). This, however, increases memory occupancy.

<a name="js"></a>
#### JavaScript Animation
#### JavaScript animation

JavaScript animation is less affected by enlarging or reducing its screen size. However, it uses a lot of device resources compared to using CSS3 animations:

Expand Down Expand Up @@ -327,7 +327,7 @@ You can use the `requestAnimationFrame()` method of the [Timing control for scri
```

<a name="css3"></a>
#### CSS3 Animation
#### CSS3 animation

CSS3 animation has a low usage of events, memory, and network capacity. It is efficient for animations that have a fixed size. However, since CSS3 animation is pixel-based, it is difficult to use for animations that need to be enlarged or reduced, in which case JavaScript is a better option:

Expand Down Expand Up @@ -365,6 +365,6 @@ The following example shows how CSS3 animation can be implemented:
</style>
```

## Related Information
## Related information
* Dependencies
- Tizen 2.4 and Higher for Mobile
Loading