Does anyone know how to add Google Pixel as a new mobile device to the Chrome developer tools?
I'm not aware of a way to add a custom device with the Android UI (like the Nexus devices have), but you can add a custom device:
Open Chrome Developer Tools (F12 or Ctrl+Shift+I)
Turn on the Device Toolbar if it's not already open (Ctrl+Shift+M)
On the Device Toolbar, click the dropdown with the device name and select "Edit…"
Under "Emulated Devices", select the "Add Custom Device" button
In "Device name" type Google Pixel
In "Width" and "Height" boxes, type 412 and 662 respectively
Leave "Device pixel ratio" and "User agent string" blank, and make sure the dropdown is set to "Mobile"
Press the "Add" button
Google Pixel will now show up in the Device Toolbar as a selectable device.
Caveats:
This does not add the Android UI, but should be representative of the viewport for mobile development and testing (as measured on my device with the default settings).
This also does not take into account a user changing the "Display size" in the Google Pixel's Display settings, which could make the viewport larger or smaller.
The viewport will be slightly shorter (fewer vertical pixels) in Chrome on Android when the page first loads since the toolbar is visible, but scrolls away. The values above were measured without the toolbar.
There is a wide variety of devices (included Pixel 2, Pixel 2 XL, Pixel 3 and Pixel 4) dropdown list of devices in dev mode with 'edit' button
And you can add custom devices (if the one you are looking for is not in the list), all you need to know is the screen resolution.
add custom device image
Or if you want to test a screen resolution just once and don't want to save it, you can just play with the width and height 'till you find the one you want.
play with x and y image
Related
If I am limited to say a 1920 x 1080 screen, how do I create media queries for a larger screen size without being able to test it?
You can set any resolution in Chrome. Just click "Toggle device mode" in Inspector and set any resolution.
In Chrome Developer Tools, you can use Device Mode to emulate any resolution, not just mobile breakpoints.
If you are using Google Chrome, you can open the web inspector Ctrl-Shift-I, then toggle Device Mode using Ctrl-Shift-M. It's mainly used for smaller devices, but you should be able to select 'Responsive' in the menu that comes up at the top of the screen, and enter any resolution you wish, along with a zoom level so that you can view it on your screen, albeit scaled.
If you are using Safari, you can do this relatively easily.
If you aren't using Safari, you probably should get it, at least for website testing. As you can see on step 6, Safari has LOTS of VERY helpful dev tools (i.e. disable JS, disable CSS, etc.).
Here is some instructions with pictures!
Go to the Safari menu (in upper left hand corner).
On that menu click Preferences, this should open up a pop-up box.
On the pop-up box, click the Advanced tab.
At the very bottom of that tab you should see a checkbox that says Show Develop menu in menu bar, check that box.
Now load your website in Safari.
When your website has loaded (for this example I'm using SO), click on the Develop dropdown menu.
Click Enter Responsive Design Mode, and that will now show your website in a window smaller than your browser window.
In that window, click on the window looking thing on the far left.
There are little gray bars on all sides of that smaller window, if you drag these you can make the size whatever you want.
As a side note, when you drag the gray bars (as shown in step 9), you should see the width and height resolution (pixels) change (see screenshot below), this is VERY helpful (and I use it all the time), as it will tell you the exact resolution (pixels) when your website breaks. P.S. you can go to ANY screen resolution - big and small - that you want to with this tool, which is really cool! (I've done 2500 x 1500, 100 x 100, etc.)
Hope this helps you!
I'm trying to use Chrome's Dev Tools to emulate a standard rendering of a webpage on numerous mobile devices. However, when attempting to emulate devices with smaller screen resolutions than the width of the page I'm trying to render, I'm only seeing what would effectively happen if I just reduced the size of my desktop browser's window by dragging its edges.
I understand that that's useful but the experience I'm looking to test is how the page will look when the mobile device displays a zoomed out view of the site to fit the screen (this is typically what you see on mobile devices when a webpage isn't configured with viewport meta tags and/or CSS media queries).
Is there any way to achieve emulation of this default zooming behavior with Chrome's Dev Tools?
If you mean with non 'responsive sites with no viewport' to be rescaled to the default viewport of the device to get an idea of what the rescaling looks like, you can more or less reproduce it visually, yes.
Click on 'Screen' to do a custom emulation. And manually enter your target pixel display width and height sizes as 'Resolution'. Say 320 x 480 for an iPhone target.
Then enter a 'Device pixel ratio' that is: 1 / your-fixed-width * device-width
e.g. 0.3125 % for a fixed-width-design of 1024px to a 320px iPhone resolution target width.
It will fit your fixed-layout in a contained viewport accordingly, which you can manually rescale arbitrarily by changing your browser window size, or by moving the Chrome inspector bar up and down.
Fonts won't be as crisp and clear as a real device but that should give you an accurate visual layout.
To emulate a viewport larger than your current one, Inspect the page (in a Chromium browser, right-click on a page element and select Inspect or use Ctrl+Shift+C shortcut on Windows or Command+Shift+C on Mac), then select the Viewports (Command+Shift+M on Mac) or click the icon as highlighted below. Choose Desktop from the dropdown at top of image and select 50% or other zoom. You can then resize the nested viewport using the highlighted draggable edges.
I have this page :
http://people.opera.com/andreasb/viewport/ex01.html
Which uses viewport for different mobile screen sizes.
When I run this at my iphone I do see the font changes :
But when I use Ripple or other chrome extensions (which I found) , it doesnt show me the increased font size. only
screen size is changing. ( but it doesnt affect the font size )
How can I emulate ( chrome extension) the screen size so it will show me as if I'm on real mobile ?
You don't need a Chrome extension for that, the developer tools already have such a built-in feature.
Open the developer tools (F12, CtrlShiftI, ...).
Click on the gear in the bottom-right corner.
Click on "Overrides".
Enable "Device metrics", and adjust the "Screen resolution" / "Font scale factor" to your desired values.
Examples (360x200 and 200x360, I didn't zoom or resize the screenshots):
Some preset values can be used by switching the user agent (above "Device metrics"). If you want multiple custom values, create a Chrome extension using the chrome.debugger API.
One user reported me that on his 11 inch macbook air all messed up. Now I do not have idea how can I fix that. Maybe there is some tools that I can use to emulate 11 inch macbook air?
Thanks
If you're using Firefox 15 or later, you can use the responsive design view by pressing Ctrl-Shift-M or going to the Firefox menu -> Web Developer -> Responsive Design View. That lets you easily resize the page (from a list of common resolutions, or arbitrarily by dragging the edges) without having to resize your browser window (as well as letting you resize it larger than your window). Other browsers might have a similar feature, but I'm not sure.
If you press Ctrl + Shift + M in your keyboard on, Mozilla Firefox and/or Google Chrome, then they will launch the Responsive Design View (Firefox) or Device Toolbar (Chrome) mode. Here you can manually adjust the window width and height to a match any device dimensions you wish, or you can also select from a set of preset device dimension options. It also gives the option to view the selected dimensions in either landscape/ portrait mode (for portable devices such as mobile or tablets) to see how a/your website would look in those different orientations.
I am not sure about any other browsers, but you can try to use the above keyboard shortcut, on another browser of your choice and see if it works there aswell.
Alternatively you can manually toggle the Responsive Design View (Firefox) or Device Toolbar (Chrome) modes, by navigating to:
Firefox 59
Menu (hamburger icon on top right) > Web Developer > Responsive Design Mode
Chrome 65
Menu (Three-dot icon on top right) > More Tools > Developer Tools
OR
Simply press Ctrl + Shift + I to launch the Developer Tools
Once the Developer Tools has launched click on the toggle device toolbar icon on the top-left corner of the Developer Tools menu, to view the webpage in responsive design view.
Again, I am only aware of doing this in Mozilla Firefox and Google Chrome, so other browsers may have a similar or different approach.
UPDATE
Edge Browser (Windows 10)
Use the keyboard shortcut Ctrl + SHIFT + I, OR navigate to Menu (three-dot icon on top right) > F12 Developer Tools to open the developer tools Menu, then go to the Emulation tab to see options for customising the window to different device size and dimensions.
First, you do not need to emulate a 11 inch screen but the screen resolution because no matter the inch of the screen, resolution can have multiple values.
I would suggest you to use a pluggin like "web developper" available for firefox and chrome (don't know for others), it will help you to resize your browser in different resolutions for testing.
chrome : https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
firefox : https://addons.mozilla.org/fr/firefox/addon/web-developer/
You can also use web app to test your site at different screen resolutions.
http://whatismyscreenresolution.net/multi-screen-test
Go to tool to test website at different resolution , enter your site's url, and hit "test" button
Get the resolution of MacBook Air and enter it in the toobar.
This tool is really good and apart from testing your site for MacBook Air, you can also test it for different device resolutions
I would like to set browser size (mainly width) larger than the screen resolution in Windows XP. It looks like there is no easy way of dragging the browser window and resizing it. It resizes to maximum width and height of the actual screen, but no larger.
I need to check and test some webpages on large screens, but I have only a small notebook of my own. Is there a way how to accomplish a larger browser window? Preferrably in Chrome, but any browser in Windows will do.
This problem can be solved in two ways: -
1. Universal browser solution
Create a dummy html page
Add an iframe to its body with the width and height attributes set to the desired dimension
Set the iframe's src attribute to the page you want to test
2. Individual browser's developer tools
Chrome
Open the developer tools using Ctrl + Shift + i
Click the second button top left that looks like a mobile phone
Drag the width to the desired width and refresh the page (F5)
Internet Explorer
Press F12
Go to the emulation tab
Change the resolution dropdown to the desired resolution
Reduce the height of the developer tools bar until the horizontal scrollbars appear
Firefox
Open the developer tools using Ctrl + Shift + i
Press the third icon in the icons on the top right of the developer tools called "Responsive Design Mode"
Choose the resolution in the top left dropdown selector on the top left of the webpage viewport.
I am testing another resolution by zoom out - every browser supports ctrl + and ctrl -
This is possible. First 'restore' (i.e. unmaximize) the window. Then you can simply adjust the width and height of the browser by using the edges of that particular window as you like.
This applies to any browser and application windows including google-chrome.
It seems like this doesn't work for every user. There's a tool called uuspy to do this as suggested in here. I haven't try on how to do this. But, since the ui of uuspy looks not that user-friendly here's quick tip.
Open uuspy.
There, in the main window, you'll see a search box. Type the first few letters of the current 'title' of the browser there (like 'test - Google Search'), and then click refresh.
It'll show a list of windows and child-windows of processes containing the searched partial title in the title-bar.
Click on the relevant one (the root/parent is the one most likely.) Then, click GetInfo.
There's two text panes there. On the left pane, there's WS_THICKFRAME. unselect it and then click setStyle.
That will freeze the resizing. I think you'll have to read the original SO answer to know exactly what needs to be done.
simple! "restore" the window to any size, drag the window so that bottom/left corner is off-screen, then resize using top and right sides to make the window ever bigger. if you need it even bigger, just drag the window again so that bottom/left corner is even further off screen.
I managed to resize the Chrome window using ScreenSpace from dandeware.com (no affiliation). There's a free lite version as well as a paid version.
After you install Screenspace, select the Chrome window and press Ctrl-Alt-R. The software then shows a virtual window and lets you resize the Chrome window in any direction beyond the virtual window. Click on the green checkmark and the Chrome window will have the same size on your physical screen.
You can change zoom of the browser or do something like this:
var desiredWidth = 1368;
document.querySelector('html').style.width = desiredWidth+'px';
In Firefox Responsive Design Mode
Menu -> Developer -> Responsive Design Mode (Ctrl-Shift-M)
gives you a drop-down to select the window size.
copy of answer to https://superuser.com/questions/1263519/how-to-create-a-1280x800-screenshot-of-a-chrome-browser-viewport/1263523
Here's another solution.
Under Linux you can freely resize the windows without any hindrance. It also has Mozilla Firefox and Google Chrome, and are almost equal in functionality to the Windows versions more or less. So, my suggestion is try this with a Linux flavor such as Ubuntu or Linux Mint. May be you can try this via the LiveCD as well. That way, you don't have to worry about installing a new OS! I can help with that if you need.
And, I found this handy bookmarklet that resizes the browser to standard screen sizes such as 800x600 etc.
if you have a dual moniter setup and set the resolution higher on one, then you can drag the size of the window on the smaller screen to the size of the larger so it will get bigger than the smaller screen -this is haw i do it with windows 7