Meta viewport ONLY for phones?
Do you mean this <meta name="viewport">
?
<meta name="viewport" content="width=device-width, user-scalable=no" />
If so, try the following script added in the <head>
(taken and adapted from here):
if(navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)) {
document.write('<meta name="viewport" content="width=device-width, user-scalable=no" />');
}
This will detect if the user-agent indicates that the browser is mobile, and will write that meta viewport as required.
set viewport using meta viewport tag for desktop browsers
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
Related Topics
CSS - Vertically Center an Image Within a Floated Div
Absolute Positioning and Its Parent Element
CSS Position Absolute with Respect to a Parent Element Acting as Relative
Images Border-Radius Doesn't Work During CSS Transition
How to Prevent Hidden Element to Be Shown When Focused in Chrome
How Do Make My Website Resize Automatically When the Screen Resolution Changes
/ (Forward Slash) in CSS Style Declarations
Javafx CSS Button with Image - How to Define the Size of the Image
Css/Js Bundle in Single File in MVC When Publish with Release Option
Fixed Menu on Left and Content Scrollable
How to Shift a Background Image with CSS
How to Set Responsive Image's Max Width (Bootstrap 4)
Background Color on Input Type=Button :Hover State Sticks in Ie