Languages

Menu
Sites
Language
Real device viewport tag behavior

Hi there!

I wish to have a confirmation: on a real device with a 720 px screen width, if I set the viewport with this meta tag only (without any additional javascript like tizen-web-ui-fw.min.js):

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

...is the viewport's width the same as in the emulator, ie. equal to 360px? And window.innerWidth === 360 ?

For information, in the simulator and emulator, I tried to fix different viewport sizes in the meta with width=whatever, with and without the tizen-web-ui-fw.min.js script, I never saw any change. The only way I found to change the viewport is to modify the scale value: 1 = 360px, 0.5 = 720px and 2 = 180px.

Again, I want to be really sure it's the real device behavior.

Thank you in advance!

List

Responses

15 Replies
talari praveen kumar

Hi 

I have tested this in real device, when I include 

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

I found that viewport's width and window.innerWidth is "720px". I also tried with different viewport sizes in meta with width='different sizes' but the window.innerwidth is "720px".

Thibaut

Oops, I hit the wrong "reply" button, see below :)

Thibaut

Ho ho ho!

Thank you very much for this test! I was kind of suspecting it (I got my app rejected because of slowness and the only reason I could imagine was if the drawing process was 4x heavier than what's the code is designed for (or Tizen device having really bad performances but looks like it's hopefully not the case)).

Can I ask you if you would have some time to make another test? With:

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

...it may return 360...

Or if anybody knows how to set the viewport to the half of the real resolution (=360px on a 720px device)... :)

Thank you again!

talari praveen kumar

Hi

I tried with intial-scale=2 and maximum-scale=2 but still the window.innerwidth is 720px only

Thibaut

Lastest test (if you still have time, I will be so grateful if you have) :

<meta name="viewport" content="width=360, initial-scale=1, user-scalable=no">
<script src="tizen-web-ui-fw.min.js" data-framework-theme="tizen-white" data-framework-viewport-width="360"></script>

Hoping this tizen-web-ui-fw.min.js is something that is everytime available by default (I don't have access to the SDK right now).

And of course if somebody else already know for sure how to proceed it would be awesome!

Thank you!

Alexander AVSukhov

Hello,

Refer following article https://developer.tizen.org/dev-guide/2.2.0/org.tizen.web.appprogramming/html/multiple_screen/web_ui_scalability.htm

Thibaut

Hi! Thank you for your answer,

I already found this page but because the behavior of a real device and the emulator seems to differ I'm a little perplex.

This page means that if I use

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

The viewport's width (and window.innerWidth obviously) are going to be 360 on a 720px width device?

Alexander AVSukhov

Hello,

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).

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.

In the Tizen Web UI service, the base font size is 22 px assuming a 360 px screen width.

 

Thibaut

Thank you again for your answer!

I think I know what the viewport is and I never got any problem on other mobile devices I worked with, but maybe I should just explain my problem more thoroughly:

My application is canvas2D based, and is screen agnostic: it means when the application starts, it retrieves the current resolution with window.innerWidth and window.innerHeight, and creates a full screen canvas based on those values.

But because the rendering is pretty intensive, I usually don't want to use the real device resolution, but an halved one.
To achieve this, on other mobile devices we just have to set the meta tag like:

<meta name="viewport" id="viewport" content="width=320" />
and the viewport is then 320px width, no matter what the real device resolution is.

I just want to know how to achieve the same on Tizen :).

Alexander AVSukhov

Hello,

Try enable fixed-width scaling, the header must contain the <meta name="viewport" > tag, or the <script> tag must contain the data-framework-viewport-width attribute set to a specific width value:

<meta name="viewport" content="width=720, initial-scale=1, user-scalable=no">
<script src="tizen-web-ui-fw.min.js" data-framework-theme="tizen-white" 
        data-framework-viewport-width="720"></script>
Thibaut

Yes, that's exactly what I asked to somebody who owns a real device to test and confirm for me four post upper ;) just replacing the 720s by 360s.

I hope somebody will be able to do, because in the emulator, no matter what, I everytime get 360, but as we found at the beginning of this post, on a real device it returns 720. 

Thibaut

The full code should be simple as this:

<!DOCTYPE html>
<html>
    <head>
		<meta name="viewport" content="width=360, initial-scale=1, user-scalable=no">
		<script src="tizen-web-ui-fw.min.js" data-framework-theme="tizen-white"
			data-framework-viewport-width="360"></script>
	</head>
	<body onload="alert(window.innerWidth);">
	</body>
</html>

Thank again in advance!!!

talari praveen kumar

Hi

If you want to reduce window.innerWidth to 360px, then go to config.xml->widget there set 'viewmodes' to "fullscreen".

Alexander AVSukhov

Hello,

I tested your code on M0 device and emulator and both return 360

Thibaut

Thank you very much to both of you! I have all the information I need now :) !