How to use mobile device resolution in CSS?

Hi Guys,

Greetings!

I want to use device resolution in css so that I can make UI design and font size as per device resolution value.

Please provide me a the solution for this query.

Also please let me know for more details if you require!


Thanks

Hi Meer Imtiyaz Ali Hidayat Ali,

You can find the response to your question here, in OutSystems documentation:

https://success.outsystems.com/Documentation/SILK_UI_Framework/05_Understanding_Responsive_and_Adaptive

Regards!

Meer Imtiyaz Ali Hidayat Ali wrote:

Hi Guys,

Greetings!

I want to use device resolution in css so that I can make UI design and font size as per device resolution value.

Please provide me a the solution for this query.

Also please let me know for more details if you require!


Thanks

For example: 


.textFont{
    font-size: ((deviceResolution) * 0.04)px;
}



Meer Imtiyaz Ali Hidayat Ali wrote:

Hi Guys,

Greetings!

I want to use device resolution in css so that I can make UI design and font size as per device resolution value.

Please provide me a the solution for this query.

Also please let me know for more details if you require!


Thanks

In order to achieve this, you have to use CSS media queries.

like below

SyntaxEditor Code Snippet

@media screen and (max-width: 320px) {
.font-size{
font-size:19px;
}
}

Regards,

Pankaj

Do some search about CSS Media queries

https://css-tricks.com/css-media-queries/

Thanks for your reply on my query.

Please see below my queries 


1. Actually as per device resolution I want to sent font size.

2. How I can do multiplication in CSS like " font-size: (deviceResolution * 0.04)px; "?

3. How I can convert 100vw to device resolution in number? so that I can use the same number for calculation.


Your support is appreciable.

Thanks

Hi Meer,

As per my understanding, there is nothing like  " font-size: (deviceResolution * 0.04)px; ".

Because of Oursystems mobile app purely base on HTML5 and CSS3 so if you want you can write media queries in order to achieve the result. 


Regards,

Pankaj Pant

Solution

Hi Meer,

There's no need to use media queries, as Outsystem- Silk UI does not rely on CSS to handle the page rendering for devices. This means no media queries will be found in our CSS, which is a good practice since media queries are difficult to read, hard to maintain and easy to break.

@media screen
    and (max-width: 700px)
    and (min-width: 340px)
    and (device-pixel-ratio: 2) {
    ...
}


CSS Device Context

When the device is detected or if the context is present at the server, a set of classes is added to the page layout. Specifically, the <div> with class “Page”.

The information it adds is the following:

  • Device: desktop, tablet, phone.

  • Dimension: small, big, hd.

  • Orientation: landscape, portrait

  • Browser: chrome, firefox, IE8, IE9, IE10, IE11, Safari, etc.

  • Operation System: windows, ios, osx, android, ubuntu, linux, unknownos

This makes CSS coding easier:

.Button {
    padding: 10px;
}
.tablet .Button {
    padding: 15px;
}
.phone .Button {
    padding: 12px;

.desktop.IE8 .Button {
    padding: 9px;
}


Ref Complete Detail  : https://success.outsystems.com/Documentation/SILK_UI_Framework/05_Understanding_Responsive_and_Adaptive


Cheers,

Assif


Solution

assif_tiger wrote:

Hi Meer,

There's no need to use media queries, as Outsystem- Silk UI does not rely on CSS to handle the page rendering for devices. This means no media queries will be found in our CSS, which is a good practice since media queries are difficult to read, hard to maintain and easy to break.

@media screen
    and (max-width: 700px)
    and (min-width: 340px)
    and (device-pixel-ratio: 2) {
    ...
}


CSS Device Context

When the device is detected or if the context is present at the server, a set of classes is added to the page layout. Specifically, the <div> with class “Page”.

The information it adds is the following:

  • Device: desktop, tablet, phone.

  • Dimension: small, big, hd.

  • Orientation: landscape, portrait

  • Browser: chrome, firefox, IE8, IE9, IE10, IE11, Safari, etc.

  • Operation System: windows, ios, osx, android, ubuntu, linux, unknownos

This makes CSS coding easier:

.Button {
    padding: 10px;
}
.tablet .Button {
    padding: 15px;
}
.phone .Button {
    padding: 12px;

.desktop.IE8 .Button {
    padding: 9px;
}


Ref Complete Detail  : https://success.outsystems.com/Documentation/SILK_UI_Framework/05_Understanding_Responsive_and_Adaptive


Cheers,

Assif


Hi Assif,

One quick question.

 I am aware of outsystems uses classes like the desktop, tablet, and phone

For example, I want some classes to be applied only in iPhone 5 that time which class you suggest to use?

.phone class will universal for all the mobile right?


Regards,

Pankaj


When you need to calculate stuff, you can also use the calc() function in css


For example: font-size: calc( 10vw * 0.04)

Pankaj pant wrote:

Hi Meer,

As per my understanding, there is nothing like  " font-size: (deviceResolution * 0.04)px; ".

Because of Oursystems mobile app purely base on HTML5 and CSS3 so if you want you can write media queries in order to achieve the result. 


Regards,

Pankaj Pant

Hi Pankaj,
Thanks for reply.

I had use @media screen too, but there nothing affected on font size when I checked in iPAD and iPhone devices.

I appreciate your help. Thanks


J. wrote:


When you need to calculate stuff, you can also use the calc() function in css


For example: font-size: calc( 10vw * 0.04)


Thanks J,

I got my expected solution by using following method.

calc( 100vw * 0.04) 

Great Thanks (Y)



assif_tiger wrote:

Hi Meer,

There's no need to use media queries, as Outsystem- Silk UI does not rely on CSS to handle the page rendering for devices. This means no media queries will be found in our CSS, which is a good practice since media queries are difficult to read, hard to maintain and easy to break.

@media screen
    and (max-width: 700px)
    and (min-width: 340px)
    and (device-pixel-ratio: 2) {
    ...
}


CSS Device Context

When the device is detected or if the context is present at the server, a set of classes is added to the page layout. Specifically, the <div> with class “Page”.

The information it adds is the following:

  • Device: desktop, tablet, phone.

  • Dimension: small, big, hd.

  • Orientation: landscape, portrait

  • Browser: chrome, firefox, IE8, IE9, IE10, IE11, Safari, etc.

  • Operation System: windows, ios, osx, android, ubuntu, linux, unknownos

This makes CSS coding easier:

.Button {
    padding: 10px;
}
.tablet .Button {
    padding: 15px;
}
.phone .Button {
    padding: 12px;

.desktop.IE8 .Button {
    padding: 9px;
}


Ref Complete Detail  : https://success.outsystems.com/Documentation/SILK_UI_Framework/05_Understanding_Responsive_and_Adaptive


Cheers,

Assif


Hi Assif,

Thanks for your reply.

This is also working for me. Thanks

But here need to write separate CSS for each element as per device targeted.

Even good idea you shared. Thanks (Y)