2

I'm guessing the answer is no but is there a reliable way to make a webpage responsive without adding a viewport meta tag to the head?

I have added a login form container that's 400px wide and centered vertically and horizontally. It looks fine on desktops but it is zoomed way out and looks tiny when you access the page on a mobile phone. Users have to swipe multiple times to zoom in so they can use the login form.

I don't have access to the head. I can only create a container within the body. However, I can add CSS for anything and basic JavaScript. I have limited access because the webpage is generated by a server program. It only allows adding a CSS file and header & footer HTML files. Basically, it limits me to wrapping the form and error container with a custom container.

Jeff
  • 495
  • 1
  • 5
  • 18

4 Answers4

0

From a quick glance (at Can I change the viewport meta tag in mobile safari on the fly? for example) it seems you can really create and inject relevant meta tag with JavaScript, like:

<script>
(function(){
var m = document.createElement('meta');
m.setAttribute('name','viewport');
m.setAttribute('content','width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0');
document.head.appendChild(m);
})()
</script>

Test page: you should see wide overflowing dark paragraph before tapping the button which executes above function. After that the paragraph should fit into the viewport.

myf
  • 9,874
  • 2
  • 37
  • 49
  • Does nothing. I also tried JQuery append but it too, does nothing. – Jeff Sep 23 '18 at 23:02
  • @Jeff, what browsers have you tried? I've made a simple test (added to answer) and tried all mobile browsers I could and found none that "does nothing". – myf Dec 11 '18 at 08:36
0

You can build a responsive websites using CSS's @media rule.

Media queries allow you to apply specific css style's depending on device type an characteristics. Consider the following code, for example:

body {
  background-color: yellow;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: blue;
  }
}

This code will result in your page's background color being blue until the screen width is <= 600px.

Read this MDN article for a more detailed explanation on media queries.

  • This does not help with initial zoom on page load. – Jeff Sep 23 '18 at 23:53
  • 1
    @Jeff Add additional media query rules for different zoom levels. –  Sep 24 '18 at 01:09
  • 1
    Media queries are not the issue. Simply adding the viewport meta tag would make the 400px wide login form fill the screen on smaller devices but as I stated previously, the html is generated by a server app so I cannot gain access to the head. – Jeff Sep 25 '18 at 02:09
0

You can use JavaScript to program your own responsive behaviors. A simple example would be to scale the html container by the devices pixel density.

"window.devicePixelRatio" gives you the actually number pixels per css pixel. Then scale your container by it:

const pixelDensity = window.devicePixelRatio;
document.getElementById("container").style.transform = "scale("+pixelDensity+")";

Css media queries may not work properly, but again you can use javascript to dynamically load styles based on the adjusted screen size when multiplying by the pixelDensity above.

YAHsaves
  • 1,697
  • 12
  • 33
-1

You can do it with JavaScript, but it can be apply only after the page was loaded, so it's not usefull in your case...

benCat
  • 124
  • 3
  • 7