Olivier Arslan Olivier Arslan - 3 months ago 6
CSS Question

Resize the browser's width using JQuery

I'm looking for a way to resize the Chrome browser's width with a button. Preferentially using JQuery. My goal is to show the mobile version of the website to desktop users.

I know I can do this by just resizing the BODY tag (which is definitely easier) but I got curious.

I haven't found reliable answers to this question and sorry if it has already been asked.

Other ideas are always welcome.

Thanks. :)

Answer

Recent browsers (since FF7) aren't going to support window.resizeTo(x,y) unless it's a window you created that doesn't have any other tabs. This is to prevent abusive website code.

Check the notes on this MDN Window.resizeTo() help:

Since Firefox 7, it's no longer possible for a web site to change the default size of a window in a browser, according to the following rules:

You can't resize a window or tab that wasn’t created by window.open.

You can't resize a window or tab when it’s in a window with more than one tab.

Like you mentioned, you can launch a new window with a specified size to preview a mobile experience. Alternatively, you could create an IFrame with a specified size:

<iframe src="/mobile" width="200" height="200">