CODEWITHSUNDEEP
htmlcss
mlemos
mlemos

Reputation: 1245

Is it possible to scale a HTML web page viewport to a large screen?

I am using the meta viewport to make Web pages adapt to mobile devices with the usual tags like this:

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

However many of my site users have large screens. The used viewport width is 1025px, so with larger screens, say width larger than 1920px, the users would prefer to make better use of the left and right space outside the main contain that is always empty.

Is there way to make the zoom scale of the page adapt to the viewport width when it is higher than 1025px?

I suspect that some combination of meta viewport tag attributes and some media queries it may be possible but I could not find anything to make it responsive to large screens, only to smaller screens.

Upvotes: 0

Views: 2819

Answers (1)

Miro
Miro

Reputation: 8650

You just need to add another media-query to handle high resolutions

Demo for >1280px

@media only screen and (min-width : 1280px) {

#Container {
    width: 95%;
}

#PageContent {
    margin: 0px auto;
    max-width: 100%
}


#PageInfo {
    max-width: 100%;
}

.InfoContent{
  max-width: 100%;
}

.c640{
  width:20%;
}

.c640 .box{
  width:100%;
}

#navigation{
  width:auto;
}

.box{
  float:none;
}

}

It's not perfect but you can use this break-point add add more style and fix whatever doesn't look good on higher resolutions.

Upvotes: 1

Related Questions