In short, that was not how the Wild Wild Web was designed to work.

The original design was simply that the HTML gave the browser hints about the document. Which bits to emphasise, where to go to get image files. Decisions about the font (as well as what size) was the job of the browser and local configuration settings.

Yes, I know the world has moved on, and now web designers expect to control every pixel our eyes get to see. In the bygone past, that was the desktop theme’s job to do that.

I think you haven’t totally got the idea of Responsive Web Design. Serving different HTML/CSS/JS based on the client’s web-browser has been there for a while and I’m pretty sure there are still some websites still doing that — a very clear example is the old-school way of serving a mobile-friendly theme for a website.

What you’re missing, in my opinion, is that in your scenario if the user changes the view-port from portrait to landscape, then you won’t get any responsive answer, unless you refresh the page. Same action is require if you resize the web-browser window or change the default zoom. Also an element in a page could be responsive to other elements as well. So, if you hide the sidebar on the right, for example, the main content will response to the change. These won’t be possible in your way, again, unless you refresh the page.

Also HTTP requests are not just designed to server the whole web page. In many cases you’re sending request to send/receive plain data, files, images, etc. which they don’t need to carry on the view-port meta information and the overhead in a scale like Internet will be a lot I guess.

Are you sure you’re doing responsive design? Responsive design is technically the combination of fluid design and media queries.

Fluid design solves 90% of the viewport issue for you, if you are smart about how you lay things out. Media queries get you the other 10% by changing grid characteristics based on current dimensions.

If you’re trying to do only fluid (percentages everywhere, relative sizing on everything, nothing specified in pixels, etc.) you run into the problem of what to do when the viewport is dramatically different in size (like a desktop landscape view vs. a mobile portrait view). Some things simply don’t fit when you go from 2048px to 640px. When you try to do only media queries, you end up with dozens and dozens of media query breaks, and you’re basically micromanaging your CSS classes in that case. Neither approach is adequate for RWD — you have to combine the two to get everything.

My advice: create three or four different “nominal resolutions and orientations” — like Desktop landscape, iPad portrait and landscape, iPhone portrait and landscape — and treat them as your wireframes to work from. Then set up your media queries for those breaks. Then work really hard to stick to those few breaks, using fluid layouts to accomplish it — most likely with a CSS grid of some kind (there are dozens of them prebuilt for you, or you can roll your own).

If you have a dynamic website that fetches the content, a code like this will do the trick (in ES6):

var headers = new Headers();
    headers.set('window-w', window.innerWidth);  // or $('html').width()  with jQuery
    headers.set('window-h', window.innerHeight); // or $('html').height() with jQuery
fetch(url, {'credentials': 'include', 'headers': headers})
.then(function(response) {
    ...

Note: ‘credentials’ is for session cookie

Then you can read those headers server-side with for example (in PHP):

$headers = getallheaders();
if (isset($headers['window-w']) and isset($headers['window-h'])) {
    $window_w = 1 * $headers['window-w'];
    $window_h = 1 * $headers['window-h'];
    if ($window_w * $window_h > 0) {
        ...

This will not work for the simple reason that the user may resize the browser window without a page reload.

Responsive design means the layout changes dynamically in response to different viewport sizes and other factors. So if the design is fixed on the server side based on viewport size at the time of request, it would not be responsive if the window is resized by the user. This is why media queries are evaluated on the client side.