CODEWITHSUNDEEP
htmlcss
Apurva T
Apurva T

Reputation: 167

set viewport using meta viewport tag for desktop browsers

I have a client provided website of width 1440 pixels. The client has asked me to set the viewport to 1440 pixels using for desktop browsers so that for screens smaller than 1440 pixels do no show a scrollbar.

It does work for mobile, ipad devices where we can can set the viewport using this. Does this work for desktop browsers as well?

I tried setting the viewport using this but could see a scrollbar. Could someone provide some thoughts on this.

code: 

   <!DOCTYPE html>
     <html>
     <head>
     <meta name="viewport" content="width=1440">

     </head>
    <body>
<div style="width:1440px;">
    test content
 </div>


 </body>
</html>

Thanks

Upvotes: 13

Views: 18588

Answers (3)

Tom
Tom

Reputation: 2645

As mentioned by Quentin, the viewport is not for desktop devices. It is only for mobile devices.

Google says:

TL;DR

Use the meta viewport tag to control the width and scaling of the browser's viewport. Include width=device-width to match the screen's width in device-independent pixels. Include initial-scale=1 to establish a 1:1 relationship between CSS pixels and device-independent pixels. Ensure your page is accessible by not disabling user scaling.

To do what Google says use:

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

I think you need to explain what a viewport is for to your client and why they shouldn't/ don't need to set it to a fixed pixel width. Allow the browser to establish the width of the content.

Reference: https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en

Upvotes: 9

Bivek
Bivek

Reputation: 1398

Instead of using a fixed size for viewport, use this: 

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

This will automatically detect the screen width of the device being used and display the web page. Hope that solves your problem.

Upvotes: -1

Quentin
Quentin

Reputation: 943651

No.

When the first iPhone was released, it needed to be able to display webpages designed for viewing on computers with much larger displays. Since that was almost all websites, it defaulted to performing zoom tricks to fake having a display that size.

Meta viewport was introduced so that authors could tell the iPhone that they knew what they were doing and had actually considered mobile sized devices.

There was never a need for that on computer screen sized displays, so no support for meta viewport has ever been introduced outside of mobile browsers.

Upvotes: 13

Related Questions