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 ".
Related
I have been trying to make a responsive website for mobile devices . I have found two ways to test responsive design:
By resizing the window
Using Google Chrome developer's tools
In both of them I get a different view. Which one gives me the right view, as I use font-size and padding in 'em'.
Resizing browser window is not Responsive. While developing Responsive applications the easiest, but yet not perfect, way is using Chrome's Developer tools. Even that may give you different results, because mobile device screens are using not just width/height but also dpi. So 320 iphone6s screen is not going to be perfect match for 320px resized browser or equivalent android device.
Go for chrome developer tools. It's a great way of checking responsiveness. It comes with dimensions of popular mobile and tablet devices. So you can check for a variety of device at once.
Simply resizing the browser is not a right way of checking responsiveness.
Recently I built a page that works fine with both the ways you mentioned. You can check it here.
Let me know if you need any help.
I would say Chrome Dev Tools is the best bet for a local snapshot.
However, if you have access to one or more mobile devices you may want to launch the site on Heroku or another production environment and view it from the actual device.
An iPhone 6 for example, I find Chrome does not take into account the address bar or bottom nav in safari so things can be slightly off from the Chrome Dev view of iPhone 6.
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 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.
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
I recently put together a website exclusively using a computer with a wide screen monitor. Later, When opening the same pages online using a computer with a smaller sized monitor, I suddenly noticed that all the div positions are completely out of place. My question is how to use the widescreen monitor to continue to develop my webpages without messing up div positions for views on regular sized monitors?
Re replies:
Thanks for the advice guys. I agree that the design of the page should be flexible enough to accommodate most browser window sizes. However, when u are working with a widescreen monitor and not paying attention it is easy to overcompensate div placements and element sizes. My next question is on how to be sure of regular browser window dimensions and how to force my browser window into that size?
Thanks Cyrena for giving me directions with the development tools. I do use them and check across browsers. But My problem here was working exclusively on a widescreen monitor with the browser maximized. I don't want to make the same mistake, so I need to figure out how to resize my browser window with the right dimensions.
Two basic approaches off the top of my head:
Resize your browser to be the width of your minumum supported desktop/browser size.
Set desktop preferences to be different sizes (like profiles) and switch between them during testing phase.
The truth is that a really good looking site will never work on all browser configurations. Choose a bar and work against that.
Don't maximize your browser window? Just shrink it horizontally a bit?
But any website that has such a high dependence on the shape of your display is poorly designed. It should fit to any size display that's bigger than some minimum (no use spending extra effort to make it fit on a 100x100 pixel screen)
If you use IE's Developer Tools, you can resize the window to see what it would look like at different resolutions.
Check it out in:
Tools > Developer Tools > Tools menu > Resize.
You will also want to make sure you are testing your website on other browser / OS combinations at the very least.