Skip to main content
S
shareenawahab
Participant
February 16, 2015
Question

Responsive HTML5 Output: How to auto adjust the screen resolution for all devices?

  • February 16, 2015
  • 1 reply
  • 3066 views

Responsive Layout HTML 5 output has to adjust the screen resolution and setting whereever the output is viewed ie. Desktop, Laptop, Tablet or Mobile.

But I can view the output of Desktop only in 95% zoom of the computer, in 100% zoom in desktop shows the output in the below format:

Desktop view:

    in 100% zoom: Its a bug, we need to fix it as like the second screen capture

   in 95 % zoom on desktop:

We need solution for this since we cannot refer the User the browser type & fixed screen resolution,

so I need my output should auto adjust to all screens and browsers, kindly fix me as early as possible, since I have been at the final phase of the project

This topic has been closed for replies.

1 reply

Willam van Weelden
Willam van Weelden
Inspiring
February 16, 2015

What do you mean by 'has to change the resolution'? Are you seeing the wrong outputs on devices? (That's what I can gather from the zoom levels.)

You can change the media queries to determine which devices see which version.

S
shareenawahabAuthor
Participant
February 16, 2015

The output need to get adapt with the zoom level of the devices. Yes , the desktop view seems to be like tablet view in 100% zoom. May I know what is media queries where I have fix that on Robohelp? Kindly help me with fixing this issue...

Willam van Weelden
Willam van Weelden
Inspiring
March 9, 2015

The CSS didn't come through in the web interface. (I got an unformatted CSS as notification though.) Can you use a file sharing tool like Dropbox to share the CSS?


I'm not sure what you changed in your CSS. Try the following: Get the original CSS.

In the main.css there are four different media queries:

@media screen and (max-width: 43.68em) --( device width < 219px)

@media screen and (min-width: 43.69em) and (max-width: 59.49em) -- (Device witdh >= 219px and width < 952px)

@media screen and (min-width: 59.5em) and (max-width: 80.99em) -- (Device width >= 953px and width < 1296px)

@media screen and (min-width: 81em) -- (Device with >= 1296px)

You get the dimension as pixels by: em * 16.

Simply search and replace the 4 media queries as outlined above with the correct dimenstions, for example to get the following:

@media screen and (min-width: 59.5em) and (max-width: 70em)

@media screen and (min-width: 70.01em)


This changes where the layout breaks (70em = 16px*70 = 1120px width) so that smaller screens can also get the desktop layout.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices