tag:service.skybound.ca,2010-06-18:/discussions/problems/165493-show-code-grid-without-browser-desktop-display-width-resizingStylizer: Discussion 2017-11-28T03:31:17Ztag:service.skybound.ca,2010-06-18:Comment/440673162017-11-17T23:41:19Z2017-11-17T23:41:19ZShow Code Grid without browser desktop display width resizing?<div><p>Hi Bryan,</p>
<p>The preview pane cannot yet be zoomed out, unfortunately. We are planning to add that capability in a forthcoming update.</p>
<p>In the mean time, it's possible to set a flag in Firefox to manually zoom the viewport, which will provide you with more available "width". To manually configure the viewport size:</p>
<ol>
<li>In Stylizer, switch to the Firefox preview plugin<br></li>
<li>Open <strong>about:config</strong><br></li>
<li>Set the <strong>layout.css.devPixelsPerPx</strong> setting to the number of CSS pixels per <em>physical device pixel</em>.</li>
</ol>
<p>The default value for this setting is "-1.0", which causes firefox to use the system default.</p>
<p>If you have a retina display, changing this setting to a value of "1.0" will double the available width (i.e. one CSS pixel per physical device pixel); a value of "1.5" will increase the width by 50%. If you are not using a retina display, "0.5" and "0.75" will double or increase the width by 50% respectively.</p>
<p>Note that devPixelsPerPx is an application-wide setting that affects all preview panes. As a result, you can open about:config in a second Stylizer window and use it to configure the other windows without closing the website you are working on.</p>
<p>Also note that the numbers on the Ruler will no longer be accurate once you have scaled the viewport. You will need to calculate the actual width in your head.</p></div>Andrewtag:service.skybound.ca,2010-06-18:Comment/440673162017-11-26T01:00:30Z2017-11-26T01:00:33ZShow Code Grid without browser desktop display width resizing?<div><p>Hi Andrew,</p>
<p>Thanks for the detailed reply. I look forward to being able to zoom out the preview pane in the update, so work-arounds like that aren't needed. ;)</p>
<p>Some background and constructive criticism on this issue:</p>
<p>My priority when designing is to view the preview pane rendered at a specific width—just like a browser—so I can style accordingly. I usually design for the desktop and then add media queries to adjust for mobile sizes.</p>
<p>Ideally for my use, Stylizer would lock the preview pane dimensions (to native desktop width initially), regardless of whether or not the user chooses to show the Code Grid. Resizing the browser to a semi-mobile view in response to showing additional UI on the screen might make an interesting alternate behavior, but it seems like an odd default.</p>
<p>A better (but still not-ideal) default would be to overlay the Code Grid on top of the preview pane (i.e., hide part of the preview) and have the user scroll horizontally as needed to show the full page width. No one likes to scroll left and right, but it would prioritize seeing the target design resolution.</p>
<p>The best approach (what would meet my expectations as a user) would be to zoom out the preview pane as needed to make room for the Code Grid, and the Ruler would scale the units shown.</p>
<p>Thanks for your great work on Stylizer.</p>
<p>Cheers,<br>
Bryan</p></div>Bryantag:service.skybound.ca,2010-06-18:Comment/440673162017-11-28T03:31:13Z2017-11-28T03:31:13ZShow Code Grid without browser desktop display width resizing?<div><p>Hi Bryan,</p>
<blockquote>
<p>Resizing the browser to a semi-mobile view in response to showing additional UI on the screen might make an interesting alternate behavior, but it seems like an odd default.</p>
</blockquote>
<p>Our intent is not to resize the browser to a semi-mobile view. We simply limit the width of the preview pane to the available width in the window.</p>
<p>The problem with horizontal scrolling is that the browser engine has it's own scrollbar that Stylizer doesn't have any control over. So if the webpage itself scrolls horizontally, you are going to have two horizontal scrollbars, which is a horrible thing to have. Not to mention the crazy hackery involved with scrolling an entire preview pane including its window frame and scrollbars. I'll leave the details to your imagination but trust me when I say it is messy business.</p>
<p>So the answer is zoom, which honestly has been planned for quite some time. I will make a note of your request and see about getting the zoom feature bumped up on the priority list.</p></div>Andrew