Is there a way (either via javascript or otherwise) to add or modify a viewport tag if a phone's CSS Device-Width is less than 800px?
I have a page at https://www.doubleparker.com/dpr/test/
(At this very second, Dreamhost is experiencing DNS issues and all sites are down...But likely to be fixed by the time you click on this link!)
It's responsive, but because of the complexity of some of the animated and interactive elements that need to be added exclusively for mobile devices, I need any viewport smaller than 800px to force-render at a fixed CSS Device-Width of 800px.
Essentially anything above 800px is responsive, but...(this is what I want to happen)...
Phones rendering at 420px would be set to fixed width of 800px.
Phones rendering at 312px would be set to fixed width of 800px.
etc.
I'm trying to move away from adaptive web design, so a separate, fixed layout for mobile and tablet is not the answer for me.
Any solutions to this would be super awesome and HUUUUUGELY appreciated! Hugely!
Another way of detailing my challenge:
I have a Samsung Galaxy S7Edge, and the default CSS Width (or "device-width") is 412px. My friend also has the exact same phone, but, strangely, HIS viewport renders at 320px.
It looks like I need to force viewport width=800 for any device-width less than 800, but is there a way to do that? Is there a snippet of code I can manually enter in via Dreamweaver, perhaps?
As it is now, with Min/Max-Width set at 800, and my phone's default viewport using 412, it renders the page twice as big as it should...(screencap below)
This has been driving me nuts for days! My kingdom to whomever can solve this!!!!!!! 
Best,
Brad
1
Reply
AdChoices