I want to test an iPhone skin for a site. To do this, I want my Chrome to act as if its screen resolution is the same as an iPhone; also, it will be best if this would only effect one tab and the other tabs in Chrome would act normally. Is it possible?
You can use ScreenFly to test your website on the iPhone resultion (screenfly uses a iframe with a specified width and height).
If you want to resize Chrome there are many extensions, some of them:
Resolution Test
Resolution Switcher
Related
I need to test an html file for mobile responsiveness, but all the resources I have found to do this need a URL or a localhost, is there any way to test responsiveness with just an html file?
Yes, simply open the .html file with Chrome or Firefox. These browsers have device mode.
You can change the screen size and see how it looks on mobile or tablet sized screens.
If you save your file .html you can open with firefox or chrome, but i suggest you to use firefox developer edition https://www.mozilla.org/it/firefox/developer/
If you use Firefox you can put in the menu -> development -> flexible display (ctrl+shift+m)
In Chrome (ctrl+maiusc+i + emulation)
In this page you can select the device to view.
You have a lot of options to test it, but each option has it's benefits.
You can minimize the browser!
You can use device mode from chrome,mozilla etc
You can find a lot of online responsive site testers for any resolution you want
In my opinion, the best way to test responsiveness is in Chrome. Right click on the page and inspect. Then there will be a button to turn on responsive testing. You can choose the device to see how your page will render on all kinds of devices. This is better than resizing your window because there are slight differences in how pages render on different tablets and phones.
There is nothing like using a real phone. As an example, px sizes differ between various phones and can cause troubles. The height of the URL bar comes into play in vertical flex scrolling when the display occupies 100%.
To do this kind of testing, you can use tunneling - products like https://serveo.net/ or ngrok.
I use http://www.responsinator.com
Very easy and complete, several types of mobile and table devices.
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.
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
Is there any way to make a preview of our template in other monitors like 14 or 15 inch monitors ?
Is there any simulator program ? I want to check that there is no horizontal scroll on screen when my web site opens .
This is a pretty quick way to test a bunch of different device viewports
http://www.benjaminkeen.com/misc/bricss/
Best of all - You can define your own viewport sizes.
I want to check that there is no horizontal scroll on screen when my web site opens .
There are several browser plugins that will simulate a resolution change by resizing the browser window. Window Resizer is one for Firefox.
Other than that, you can change your monitor's resolution to test what a site looks like on other screens. (What counts is the screen resolution, not monitor size.)
ResizeMyBrowser is my go-to for this - I just keep it open in one tab and whatever I'm working on in another, and it's easy to see all the options 'live'.
Another solution for testing your site on different resolutions is Sizer
No problems with resizing all modern browsers (32 and 64bit Windows), even their 64bit versions.
Firefox now has a native developer feature that supports resizing the viewport: Open the Firefox command line with Shift + F2, then type "resize on". Now you have a frame within the former viewport that can be shifted to the extents of your desire. You can also call a certain viewport size by entering "resize to ".
I'm working on putting together a liquid style-sheet and it works wonderful. One thing that I've noticed is that my browser window in Chrome won't resize below 400px it just gets stuck there and in FF as I scale down it it just stops at around 400px and then pops a horizontal scroll bar.
When I open the site on my phone it looks perfect at around 320px, so I know it does scale lower than 400px.
I was curious if anyone knew if this was a browser/desktop thing or if I should be looking at something other than my CSS. I don't have any min-width declarations so i'm not sure what could be causing this.
Again on desktop it scales down to a min-width of about 400px and stops, but when I open it up on my phone it scales to the size of the phone screen which is roughly 320px... curious why at the very least it won't scale down to the 320px on desktop.
-edit-
Also I'm not sure if this matters but Opera allows it to scale down to pretty much nothing... So it works with Opera and not in Chrome or FF... any ideas?
Chrome cannot resize horizontally below 400px (OS X) or 218px (Windows) but I have a really simple solution to the problem:
Dock the web inspector to the right instead of to the bottom
Resize the inspector panel - you can now make the browser area really small (down to 0px)
Update: Chrome now allows you to arrange the inspector windows vertically when docked to the right! This really improves the layout.
The HTML and CSS panels fit really well and you even open a small console panel too.
This has allowed me to completely move from Firefox/Firebug to Chrome.
If you want to go a step further look at the web inspector settings (cog icon, bottom-right), and goto the user agent tab. You can set the screen resolution to whatever you like here and even quickly toggle between portrait and landscape.
UPDATE: Here is another really cool tool I've come across. http://lab.maltewassermann.com/viewport-resizer/
this may be because of the addons you installed on your browser. remove or hide all addon icons from the tool bar and try re size. when there are addons browser only resize the address bar and keeps the addons visible.
Update: 7/14/2013
With the latest chrome version, now you can re-size the address bar and it will hide the addons automatically.
I was stumped as well but ended up with a simple solution. I just created a HTML file with a link to open a new window:
Open!
This new window has nothing but the address bar and Chrome lets me freely resize this down to 111x80.
nayan9's solution works great, and can be put into a bookmark without having to create a html file. In Chrome, create a new bookmark with URL:
javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();
And give it a name of "Open Small Window" or something similar. This will allow you to easily open windows without size restrictions within chrome. Note that just copying this into your address bar won't work - chrome strips the "javascript:" out.
In case you want to reduce your screen width to emulate different devices (and why else would you want to do this?):
Chrome now has an Emulation section in its inspector, activated by clicking the little phone icon in the top menubar (between the magnifying glass and Elements):
Emulation mode allows you to set the viewport size to all common mobile screen sizes, among other nice features, like emulating touch, geolocation and even accelerometer input:
Adding to what nayan9 and drinkdecaf said, you can just throw document.URL into the call to window.open to see the page you're currently viewing in the 320 window. You might want to add some more to the width if you're expecting a scrollbar.
javascript:(function(){window.open(document.URL, '','width=320,height=480');})();
I am lazy, to make it even easier, let the bookmarklet ask the user for sizes :-D
javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()
in chrome the icons of your addons in the top right corner cause the problem
-> resize the adress-bar (where you type the urls) to maximum width (drag the bar at the right edge to the right)
or disable the icons
The DevTools in Chrome have moved on substantially from when most of these answers were posted. The best way to address this issue now is to use the emulators that are built into Chrome.
To use the emulators open DevTools (press F12) and then click on the following icon to toggle the Device Toolbar:
This will then allow you to emulate whichever mobile device or viewport size you want to.
I found a quick workaround for this.
Just install the Responsive Web Design Add-on to Chrome, and it will open a separate window without the address bar and tabs, which can be scaled down to 10 px or less.
Link here: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related
I've been experiencing similar issues and just found a good work around. Open up your chrome devtools and in the top left, there's a little screen and ipad icon. Click that and it opens a mobile view of your page. You can set it to predefined devices or a custom resolution. Pretty nifty actually.
Another easy solution is to click Strg+Shift+N to enter Incognito Mode. There you can resize your Browser window as you like.
I like this tool because it lets you switch quickly and also switches between portrait/horizontal easily for mobile sizes. It also allows you to make a personalized bookmark let, so if you design for obscure resolutions frequently, you can save them and use them.
I had to use one of these tools because even with the above answer I couldn't get my window to scale to 320 properly, this tool seems to be a faster solution overall.
http://lab.maltewassermann.com/viewport-resizer/
I'm always running into this issue with pinned tabs. Chrome will not resize below a horizontal width of eight visible pinned tabs if there are any! Just detach the tab that you want to resize to solve this ...
For a web developer, in order to test the responsiveness of their website in mobile or tablet whose size is less than 500px or minimum width then use developer tools to test in small screens.
For testing, go to developer tools and press ctrl+shift+M or click the device icon at the top left of the developer tools screen to toggle device mode. If the device icon is in blue colour, then you can test your website responsiveness by changing the browser window.
This is my first contribution to the Stack Overflow community, and it is my effort to give back to all you wonderful people who have made internet such a powerful tool.
Now to answer:
Safari, has this cool feature.
You need to activate safari developer option in preferences.
Screenshot of setting up preferences in Safari to activate developer menu
Once activated you can access bunch of very powerful developer tools.
One of this tool is Viewport adjustment which can used to test your website responsive layout.
To activate responsive lay out testing, one can use the shortcut Command+Ctrl+R
to activate safari view port adjustment option.
This will give you enough control to test your website on various view port sizes.
Screen shot of how your browser window will look once responsive layout test option is activated.
Link to how to activate developer menu in safari:
https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/
A lot of smart phones scale the page to fit into their screen size using zooming. Your minimum page width is probably 400px. Without any example code, I think that's all that can be said.