I used to be able to open developer tools, click the little icon bottom right to open responsive mode and then drag the window width handle to change the device width.
This was really useful to see how a website would perform on different devices.
However now it just changes the scale of the page, not the width - this is rubbish.
How can I change the width keeping a fixed scale?
EDIT:
Oh - may bad. It was just the website I was on. Others work fine like it used to. Oh well.
You need this meta tag in the head section:
<meta name="viewport" content="width=device-width,initial-scale=1">
This answer comes from here.
Use Toggle Device Mode by pressing the CTRL SHIFT M sequence and the page should scale if its components are responsive.
Related
When using the option "toggle device scrollbar" in the Chrome inspector, whenever you type a new width/height, the window zoom adjusts for that width/height automatically. This is an incredibly frustrating UI, as I don't want the zoom to adjust... ever. The only way to avoid this is by resizing the responsive window by dragging the side borders.
Is there a way to turn the auto zoom off?
My current version of chrome: Version 54.0.2840.98 (64-bit)
I have had this issue a few times now. I'm unsure what causes it, but i've found that you can fix it by selecting "Restore to defaults" in the Toggle device toolbar menu.
Here's how I finally managed to resolve this issue in 5 steps, I hope it helps:
Click "Toggle device toolbar" to bring the toolbar up
Click the 3 dots on the right hand side of the device toolbar
Click the option "Add device type".
This will add a new dropdown to the device toolbar. From there you can select "Desktop (touch)"
Problem solved.
To disable scaling and zooming you must add this inside the <head> tag:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
The minimal <meta> tag (which doesn’t disable user-controlled scaling) is:
<meta name="viewport" content="initial-scale=1" />
It’s not a Chrome problem.
I asked this question a long time ago, and today I noticed a change in Chrome. I am not sure when this was introduced, since I haven't used the responsive options as much, but on Version 73.0.3683.86 (Official Build) (64-bit) there's now an option called "Auto-adjust zoom", and it was checked (enabled) by default. I unchecked it, and now the zoom will no longer change when the screen is resized.
You can access this option by clicking on "100%" next to the screen size, in the responsive screen. See image below:
I've reported this bug to Chromium.
Here's the link:
https://bugs.chromium.org/p/chromium/issues/detail?id=1129880#c2
I've found the reason why this happens as well as a "mitigation": set the height to empty string: ""
Here is what worked for me:
F12 (open developer tools)
Ctrl + Shift + M (toggle device toolbar)
Click the top right three dot menu
Click Add Device Type
On the top bar, A "Mobile" or "Desktop" dropdown list should appear
Chances are "Mobile" is selected, switch it to "Desktop"
The auto-zoom should now go away, when you are in responsive mode and shrink the width of the viewport/device...
Chrome is definitely doing something 'heuristically' and I'm pretty sure there are some bugs.
When using the 'responsive mode' (so I can drag the width back and forth) below around 320px the whole page starts scaling down. This makes sense as a default since there are basically no devices below that width and most content looks awful if it's allowed to fend for itself at such small sizes.
My original viewport settings were:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
The problem with that was there's nothing in the Chrome UI to constrain the minimum width to 320px (nobody needs to be designing for below that) and if you're dragging back and forth quickly then you'll inevitably end up with a width of say 169px. See the screenshot below to see how much of a mess I got in.
The height of my menu bar is 50px so it's clear that it is being scaled down. Unfortunately the rendering engine just seems to get confused and my buttons end up overflowing and making a huge mess. Even if I resize to greater than 320px it still stays confused and I have to refresh the page.
The important part of the accepted answer is the minimum-scale=1.0 which prevents this scaling at low screen widths.
That's the key part to add to fix the issue and I can't see any reason to not have that.
As of now you can go to device toolbar then click Responsive here:
Then in the Responsive dropdown go to Edit ... and add the resolution you want.
Then you can select your custom one from the options and zoom and it will stay the same resolution!
after alot of searching about this problem,i figured out that probably it's a browser's bug...
even tho there's a solution for this that works 100% with no problem
here's the fix for this problem :
open devtools
open "Settings"
Go to "Devices"
click "Add custom device"
set the sizes you want with and set a name for this device then click "add"
you can see your new device in the list , this way the zoom will stay 100% and fix the issue for you
Click F12
In the right, top corner, near to chrome cross sign click on "Customize and control DevTools" kebab menu.
Click settings
Click Preferences
At the bottom, Click Restore defaults and reload
Make sure that you extensions will be removed.
under zoom menu in responsive window > auto adjust zoom must get disabled
Change Dock side to Undock into separate window as shown in the picture below:
I'm making a prototype sight currently that is static (as in when the screen is resized smaller such as 480 pixels the sight does not responsively adjust its elements ). I actually don't want the sight to be responsive I want it to behave as apple.com does. Apples site is a large zoomed out overview of the site allowing the user to zoom in on what he/she wishes to. Whenever my sight is loaded on my iphone it is zoomed in to a tip corner of the site. When I apply zoom:.5 to the css it zooms out just as much as i would like it to in IE and chrome but does not in Firefox. Obviously that's a major problem being firefox is a very popular browser and i am having difficulties finding an alternative. If any one could offer any amount of alternatives (even using javascript) it would be much appreciated.
If I understand you correctly, you need to set the viewport meta.
Add the following to the head section of your site:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
This will set the initial zoom to fit the entire page, while allowing users to zoom as they please.
this is quite easy...
just do all your code in old fashioned pixel measurements
and nothing will resize and it wont be responsive at all
I have a responsive website that I think looks best when it's 500px or larger, so I set the min-width to 500px.
However, I'm testing it on a 320px phone and pages have horizontal scroll, forcing me to zoom out if I want everything on the screen.
Is this a device issue? Or is there some code I can use to make my site shrink by default? (instead of having to zoom out each time I navigate to a new page)
<meta name="viewport" content="width=device-width, initial-scale=.6">
Then just adjust scale to fit what you need
I used bootstrap in my pages, it save you this hassle, try it it is very helpful in many ways.
from here.
and also has many other futures.
this is a google search for free wordpress templates.
I created a responsive design for my website. It's based on the contents of the website being inside a div which has a height of 100% of the window. The problem is that when a user clicks on an input field, the size of the browser shrinks to fit the area between the keyboard and the top url bar on a mobile phone browser. This makes my design look very odd while the keyboard is up.
Any idea how this can be fixed? I haven't seen this happen on other responsive sites, but haven't really observed closely either.
I have the following in the head of my html file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Basically, I want the area which would otherwise be covered by the keyboard to be hidden when they keyboard is up, not pushed upward and squish my whole layout.
EDIT: I fixed it by doing this
$("#comment-text-area").focus(function() {
var height = $("body").css('height');
$("body").css('height', height);
});
Perhaps you could use javascript to detect when an input field is focused, then set the window's pixel size to whatever it was before the focus, then reset it back to auto when the field is unfocused?
As far as I know mobile browsers not resize the window when the keyboard is show, they only move and cover the window.
Maybe you problem is the way you are achieving the 100% height, is there any vendor specific css or a JS handing the resize events?
You could try adding user-scalable=false; to the viewport meta tag, but more than likely resize-on-field-focus is an un-override-able feature of the browser itself. It's usually a good thing to have, even at the cost of design, because people generally enjoy larger text areas to see what they're typing so I'd personally recommend against using this.
<meta name="viewport" content="width=device-width, user-scalable=false;">
I'm in the process of building a support page for my pre application.
I'm having a problem where the content on the page is very small, so the user has to manually zoom in to read it.
I've made the page so that there is nothing very wide or tall, but for some reason everything is very "zoomed out" when you first navigate there on the Pre.
I've noticed that sites like wikipedia have versions that are perfectly optimized for the Pre. How can I make my pages start out "full-sized" the way wikipedia does?
Update:
The extremely simple page that I am currently testing with.
On the above page I have tried setting the width for every element to both 310px and to 100%, the result is always the same.
I figure I can accomplish this by giving everything a static width and then making everything use a very big font size. I'm just guessing that there is a "better way", i.e. some way to let the pre browser know that it doesn't need to start zoomed out to the size of a "normal" web page (it seems that the default zoom is about 1024px wide, even though the actual rez is 320px).
I found out the proper way to do this on the webOSDev forums.
The following should be in the header:
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="initial-scale = 1.0"/>
This has the advantage that when the user turns the device into landscape mode, everything scales appropriately, without any styling gymnastics.
Posting a URL of a problem page would be a big help here.
In general, to show nicely on smartphones, the design of the page has to be "fluid" (taking 100% of the width in percent - not specified in pixels) to use the most space in differing screen resolutions. The minimal width supported by the design should be about 300 pixels, to fit without zooming on 320x480 screens.