Skip to Content (Press Enter)
Post Closed
2019-09-11 10-03-50
Meer Imtiyaz Ali
1568Views
13Comments
Solved
How to use mobile device resolution in CSS?
Question
Forge

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

0
0
10 Dec 2018
Copy Link
2021-04-09 11-42-43
assif_tiger
 
MVP
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


See solution in context
4
0
11 Dec 2018
Copy Link
2023-07-28 17-00-32
Marco Arede
 
MVP

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!

0
0
10 Dec 2018
Copy Link
2019-09-11 10-03-50
Meer Imtiyaz Ali

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;
}



0
0
10 Dec 2018
Copy Link
2018-08-26 20-34-32
Pankaj pant

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

0
0
10 Dec 2018
Copy Link
2021-04-09 11-42-43
assif_tiger
 
MVP
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


4
0
11 Dec 2018
Copy Link
2018-08-26 20-34-32
Pankaj pant

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


0
0
12 Dec 2018
Copy Link
2019-09-11 10-03-50
Meer Imtiyaz Ali

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)

0
0
12 Dec 2018
Copy Link
2024-03-14 14-46-22
Nelson Inácio

Do some search about CSS Media queries

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

0
0
10 Dec 2018
Copy Link
2019-09-11 10-03-50
Meer Imtiyaz Ali

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

0
0
11 Dec 2018
Copy Link
2018-08-26 20-34-32
Pankaj pant

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

0
0
11 Dec 2018
Copy Link
2019-09-11 10-03-50
Meer Imtiyaz Ali

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


0
0
12 Dec 2018
Copy Link
2016-04-21 20-09-55
J.
 
MVP

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


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

1
0
12 Dec 2018
Copy Link
2019-09-11 10-03-50
Meer Imtiyaz Ali

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)



0
0
12 Dec 2018
Copy Link
2023-01-19 15-05-03
Sirajeddine Bouasker

Unfortunately, the Silk UI component is deprecated

1
0
06 Feb 2023
Copy Link
Post Closed