Copy link to clipboard
Copied
This is driving me nuts.
I have a page at https://www.doubleparker.com/dpr/test/
https://www.doubleparker.com/dpr/test/
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 want any viewport smaller than 800px to force-render at a fixed 800px. I've heard that min-width might be able to do this, but it's not working through Muse.
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!
Best,
Brad
That viewport meta tag does 2 things...
1. It takes whatever page width it's fed by media queries and sets the width of the page to the css-pixel device-width of the screen. Effectively zooming in or out to the point that the page width is the same as the reported device-width and there's no horizontal scrolling.
2. It sets that zoom level as 1:1. You'll still be able to zoom in or out, but when the page loads, the website will be the same width as the available css pixel screen real estate.
This e
...Copy link to clipboard
Copied
Copy link to clipboard
Copied
I did. Min Page Width is 800, as is Max Page Width.
I think Muse is displaying the code properly, but, for mobile devices, I think the challenge is addressing the viewport directly. 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)
Hope that makes sense.
The responsive page in question is still at www.doubleparker.com/dpr/test.
Thanks so much, Preran! I really appreciate you looking at this issue. It sure has eaten a lot of my time up, without success. Very eager to find a solve for this without having to resort to an adaptive website solution.
Best,
Brad
Copy link to clipboard
Copied
Thank you for the clarification. I am not the expert here. I am hoping that someone here has a better response for you. I will forward your post to some of my colleagues meanwhile.
Thanks,
Preran
Copy link to clipboard
Copied
Thanks Preran!
Fingers crossed somebody has a solution. Seems like it would be a pretty useful solve. Forcing a viewport to render to a specific width when on a mobile device would be a huge boon for those not wanting to have to relay solely on breakpoints considering how many device-widths are out there.
Best,
Brad
Copy link to clipboard
Copied
I can't get your link to open for some reason, so I can't take a look at your code, but the issue you appear to be having sounds a lot like you're missing the viewport meta tag.
Do you have this in the <head> section of your page?
<meta name="viewport" content="width=device-width, initial-scale=1">
Copy link to clipboard
Copied
Hi Jon!
Dammit! My site is down! And it looks like Dreamhost has me in a 157-person queue to address the problem ... One of their servers might be down. Bad timing for that. Sorry for that inconvenience, but please let me tap you the second it's back online. I really do need this solution. I'm pulling my hair out over here!
I thought I had certainly tried that before (<meta name="viewport" content="width=device-width, initial-scale=1">), but I'll try that again when I'm able to upload the change and view it on a mobile device.
During this time though, the goal on my end is for any mobile device with a device-width of lower than 800px to force render the viewport to 800px. Is that what the
<meta name="viewport" content="width=device-width, initial-scale=1">
tag would achieve?
Copy link to clipboard
Copied
That viewport meta tag does 2 things...
1. It takes whatever page width it's fed by media queries and sets the width of the page to the css-pixel device-width of the screen. Effectively zooming in or out to the point that the page width is the same as the reported device-width and there's no horizontal scrolling.
2. It sets that zoom level as 1:1. You'll still be able to zoom in or out, but when the page loads, the website will be the same width as the available css pixel screen real estate.
This explains it in much more detail: Using the viewport meta tag to control layout on mobile browsers - Mozilla | MDN
Copy link to clipboard
Copied
Thx Jon, that certainly sounds like it should do the trick. The logic makes perfect sense to me. So that viewport tag, if the min-width is set at a fixed 800px, will force render a device's css-pixel device-width to 800px? If so, that would be the answer I've been looking for! I sure hope so!
Will let you know the second Dreamhost resolves their DNS issues. They're working on it. Ugh.
If this works, you are a Total Rockstar and I will be singing your name all day long!
-B
Copy link to clipboard
Copied
I also suggest checking with our experts on the DW forum Dreamweaver support forum