This question already has answers here:
How to make the window full screen with Javascript (stretching all over the screen)
(22 answers)
Closed 6 years ago.
Hy all,
I need a javascript code, that when my site loads, automatically load it into full screen mode, as if i was pressing F11, and i have my reasons to do that..So anyone knows the right code to do that?
I also need to prevent the user from changing the screen size of the page
There is a full screen API, but it is currently an early draft and browser support is very weak.
Foisting full screen mode on anyone who visits your site is one of the more hostile things you can do as a web author. You should seek an alternative design that solves whatever problem you have without doing that.
Unfortunately, there is no perfect way to get the browser to come up in full screen mode. However, you can use the screen object to determine the screen size, and set your window size appropiately. The useful screen properties are availWidth and availHeight or width and height. You can then use those to set the window object properties, either innerWidth and innerHeight or outerWidth and outerHeight. I suggest you play around with retrieving and setting these properties. Also, different browsers behave slightly differently, so, if possible, I suggest you try your code on IE (which (surprise!) is the least standard), Firefox, Safari, and Chrome.
I know the "purists" will tell you forcing a certain window size is not a good thing to do. But in some cases it is appropriate. I have written an application related to the card game bridge, and, if the browser comes up too small, the card images are unreadable. So, the first time a user accessses my web page, I make it as large as I can. Most people leave it that size. But, if they reduce the size, I store the dimensions in a cookie, and the next time they go to my page, it remembers how big to make the page. I have received many compliments on using this approach.
Related
What I'd like to do, if it's technically possible, is leverage JavaScript (frameworks such as jQuery are totally fine, too), to determine what percentage of an inactive browser window might still be in view.
For example, in the image below, imagine I'm working on a project for CNN.com. In this scenario, I know I can use window.onfocus and window.onblur to determine whether the window marked as Background window is in focus or not.
[![enter image description here][1]][1]
However, I'm interested in measuring what percentage of the viewport/page for the Background window is visible to the end user, and/or what percentage of the page for the Background window is not visible. Or, an alternative approach could also be to simply determine whether an element (by ID) is in view on the Background window or it's obstructed by any foreground windows.
After extensive Googling and Stack Overflow searching, I'm not finding a solution for what I'm trying to achieve. This could obviously be due to technical impossibility, but I wanted to ensure I've left no stone unturned in troubleshooting.
The use case here is that I'd like to be able to pause videos and animations, etc. when a given element is not visible on the page -- not just when the window is not active at the moment, since users can often have windows arranged side-by-side, and might want to watch a video while multi-tasking. even though the window might be active at a given moment. Conversely, if a window is covered up, the desire here (for business purposes) is to pause the video, so we are not serving videos (or video ads) when a player is out of view.
I was playing with a webapplication page developed by me using selenium.
Using selenium JavaScriptExecutor I executed following script.
executor.executeScript("return window.innerWidth");
executor.executeScript("return window.innerHeight");
to my surprise, the so called viewport size came different from Chrome, IE & Firefox.
Chrome: 1366x667
IE: 1366x667
Firefox: 1366x657
Then I realized that for body and main div, right next to body I gave css style width and height as 100% which in turn effects the view port size. As different borwsers are having different size of toolbars and menu, this 100% value changes when actual page is rendered.
So I used window.resizeTo(w,h) for setting a common viewport size. But I realized it doesn't work with modern browsers until and unless window is opened by the same script.
So I used selenium's
driver.manage().window().setSize(new Dimension(w,h));
yet I am not able to set the common view port size.
Please help to find, is it possible to set common viewport size using selenium?
Do let me know, if you need anymore info.
I executed following line for all browsers:
driver.manage().window().getSize();
Answer I got is 1382x744
So I believe this about the overall browser window, not only rendering area.
And I got confused that based on the difference of innerWidth how to calculate the browser window's new size?
PS: I have all the browsers upgraded to latest version (IE is version 11 as I am on windows 7), selenium version I am using is 2.46.x
"to my surprise, the so called viewport size came different from Chrome, IE & Firefox."
It should not be surprising that the view port size is different on all browsers, Safari even has a different one as well. When you are calling window.innerHeight it only counts the browsers inner content. So anything outside of it is not counted, the area where you enter your URL is entered is not counted for example. So each browser uses a different amount of maximum height by their tabs, and Global address bar.
When you use driver.manage().window().setSize(new Dimension(w,h)); and set it to 1920x1080 for example then all browsers will be set to that size, but of course they will have different inner height being used.
If you want the entire browser to render as 1920x1080 then I would suggest with
using Robot robot = new Robot();
robot.keyPress(KeyEvent.VK_F11);
Thread.sleep(250);
robot.keyRelease(KeyEvent.VK_F11);
but I would advise against it, since a more valid test is to use the normal inner height of the browser, since most user do not press F11 and view their content at full screen.
This question already has answers here:
can php detect client browser monitor size/resolution?
(8 answers)
Closed 8 years ago.
I'm interested in using a php if statement to include or exclude code based on the user's browser size. For example, a slider will only load if the user's browser size is greater than 768 x 900px.
I know how to hide an object using the css viewport, but I imagine the page speed would increase if I could simply not load the code at all, rather than hiding it.
A few questions so I can better understand
1) Is PHP capable of detecting a user's browser size?
2) Is an if statement a feasible way of achieving this?
3) Am I correct in assuming that not loading the code altogether is more efficient than just hiding the output via css?
4) I haven't started learning javascript yet, would you recommend that as the best way to achieve this?
Any help is really appreciated!
PHP is not capable of detecting the user's browser size. The PHP is executed before there even is a user, as it's on the server.
...
If you have tons of code, then yes, it might be more efficient, but a single slider should not make such a big difference. I would recommend just loading it, and hiding via CSS.
As i mentioned in the above bullet point, CSS is going to be more efficient than JavaScript. Just use an #media query:
#media (min-width: 768px) and (min-height: 900px) {}
If you want to detect the screen size of your client, PHP can't help you, javascript and CSS can.
If you are concern about speed, javascript and CSS can't help you (even if it is minified), PHP can.
My suggestion is, when the client visits your website for the first time, detect their screen size using CSS and after that, save it in a database and set a cookie/session that corresponds with it.
The problem with this workaround is when the client change their screen size before the cookie expires or the session ends.
I know that similar questions were asked but this is different.
Intro: i'm triyng to make an website with adaptive designs (3 templates for 3 widths intervals as follows: 1200+px, 600-1200px, 600-px).
Problem: i have a really hard time with user screen width detection.
I' know that only js can detect user screen size so i tried two ways of detection.
1. First i used a cookie in order to store the width but because cookie becomes active only after refresh i need to refresh the page.
2. Second o used to send width as param with GET but again i need to refresh the page in order to send params.
So the question is: is there a way to get screen size without page refresh (the value to be stored in a cookie/session). I need the proper template to be delivered on first visit of page.
If there is no solution (only with refrest needed) for width detection how can a solve the problem for crawlers so they won't see the redirect.
Maybe I'm missing something here but you should be using #media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
and
http://css-tricks.com/snippets/css/retina-display-media-query/
I think you're approaching this the wrong way. Surely css #media queries are the way to do this?
If for some reason you do need the width in Javascript, then you can do
jQuery:
$(document).width();
JavaScript:
document.body.clientWidth
I would revise your methodology if you can though..?
I ended up using a DDR (Device Description Repository), exactly this one : http://wurfl.sourceforge.net/
It works good and gives a lot of etails exept on firefox.
No CSS OR JS required for use.
it it possible to resize the browser window width to fit 2 monitors through JavaScript ?
Let's say we have 2 monitors with same resolutions : 1280x760.
is it possible to expand the width of the browser to fit 2 monitor? that 1280 X 1280.
thanks.
Firstly: Don't do this! Your users will hate you for it.
Secondly, there are a number of possible configurations possible for users who have more than one monitor.
Some users will have them set to be treated as a single extra-large display; others will have them working more independantly of each other. A colleague of mine has a display-splitter hardware which means that although he has two monitors, the PC only sees one, so when he maximizes his windows, they cover both screens. My set up on the other hand is different; when I maximize, the window expands to fill a single monitor.
Some users will even have different monitor sizes and different resolutions betweeen their monitors. I know one person who has one monitor in landscape mode, and the other rotated 90 degrees in portrait mode.
A lot of these things will make it phyically impossible to have a window that is maximized across all monitors, so even if you could make it work for some users, it wouldn't work for everyone.
Assuming you do manage to get the browser window stretched across both monitors, you now have the problem of working out how to layout your page without your text and graphics being split by the edges of the monitors. Your browser won't know where the monitor edges are, so you could easily end up with important parts of your page content being broken in half which could make your site virtually unreadable.
Even if you know in advance exactly what the user's screen resolution is going to be, you still have this problem because you don't know what the user's browser window looks like. They may have the history or bookmarks side-panels open. Their desktop settings may be different too; they may have their Windows taskbar aligned on the side of the screen rather than the bottom. None of these things are in your control, and will affect the screen space available to your browser, which in turn means you can't predict where the edges of the monitors will be even in an environment where you know the screen resolution.
In short, I don't believe it's possible, and I don't believe it's desirable. I strongly recommend not doing it.
To quote from David Flanagan, "Javascript, The Definitive Guide" (5th edition), Section 14.4.3:
"The Window object defines methods that move and resize a window. Using these methods is typically considered very poor form: the user should have exclusive control of the size and position of all windows on her desktop. Modern browsers typically have an option to prevent JavaScript from moving and resizing windows, and you shuld expect this option to be on in a sizable percentage of browsers" (emphasis added)