Forcing a Fixed Min-Width Viewport on an Otherwise Responsive Website

Community Beginner ,
Aug 22, 2017 Aug 22, 2017

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

Views

2.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Aug 24, 2017 Aug 24, 2017
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 ...

Likes

Translate

Translate
Adobe Employee ,
Aug 23, 2017 Aug 23, 2017

Copy link to clipboard

Copied

Did you set your Min Width using the process described in Adobe Muse Min Page Width ?

Thanks,

Preran

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 23, 2017 Aug 23, 2017

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)

S7Edge_Viewport412px.jpg

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Aug 24, 2017 Aug 24, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 24, 2017 Aug 24, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 24, 2017 Aug 24, 2017

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">

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 24, 2017 Aug 24, 2017

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? 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 24, 2017 Aug 24, 2017

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 24, 2017 Aug 24, 2017

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Aug 24, 2017 Aug 24, 2017

Copy link to clipboard

Copied

I also suggest checking with our experts on the DW forum Dreamweaver support forum

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines