Google Chrome Dev Tools width is different from window.innerWidth - javascript

How can I make Google Chrome Dev Tools width the same as window.innerWidth
PS: window.screen.width solved my problem

I had the same problem ..... I had a js function that styles and arranges elements .... it has 2event listeners on load and on resize..... on Desktop Mode Evrything works fine ok both load and resize ..... But When i swith to mobile type from dev tools all the elements that use innerWidth as a variable get disturbed ..... this mainly happened because i didn't set the width of an image to 100% of its cotainer wich allowed it to be at it's original size and overflow the innerWidth .... try to find elements that overflows the width of your viewport before js is loaded..... if you set a div with a width that is higher than your device width the innerWidth property gets disturbed ..... but only on mobile mode devtools the desktop mode works fine and im wondering if the problem is related to chrome devtools or the mobiles would really get the wrong innerwidth value ... after checking the element that causes the problem you can adjust its width directly from html css or set up its width with js before you start using the innerwidth property ... thus problem has confuded me and made me wanna launch automated tests because its unexpected and since i use the innerWidth a lot .... PS:Screenwidth will solve your problem but it will always get the screen size not the viewport size ... for mobiles and tablets thats going to work fine since they are always full screen but for desktop thats not going to work when you resize the browser window ... and maybe one day tabets and large mobile will allow users to resize their screens

You should make a generic function.
function paginate(array, page_size, page_number) {
return array.slice((page_number - 1) * page_size, page_number * page_size);
}
called this function whenever your screen size changes. First, try to get the data accordingly then fix the UI with CSS.

Related

React.js CSS window width

I'm developing a responsive website using react. For styling I use CSS stylesheets. The responsive part is achieved in CSS using #media queries.
The problem is that when I use chrome, the elements appear bigger and the layout is as I would access the website from a smaller screen (tablet). What I understand is that chrome 'thinks' that the view port is smaller and responds to the media queries with the according information.
The problem appeared in the middle of the development process, after some time of working correctly.
What did I do wrong and how do I fix this?
Note: When opening the website in Firefox, everything works as it should. Also, when I open dev tools in chrome (Inspect F12) and 'toggle device toolbar' to true (Ctrl + Shift + M) the dimensions are set correctly. The problem appears only using 'regular chrome'.
if the elements are appearing bigger and you want to design according to the width of the device, use vw (viewWidth) to set the sizing of the element. Use vh to set sizes according to the height of the device.
You can set font size, height/width of the div element, etc. Use this inside media queries so that the size of the font or width doesn't get too small when using mobile phones.

$window.innerHeight returns different values in chrome and firefox

I want to determine the viewport height with $window.innerHeight or document.documentElement.clientHeight but it turns out that Firefox and Chrome are returning different values (a few pixels).
Anyone already faced this issue?
The height of the body is determined by the available height inside the browser window.
Different browsers have different graphic interfaces, varying toolbar heights, number of toolbars, etc. All those elements will influence the height available for the actual HTML content.
Try the following in various browsers (in full size)
console.log(document.documentElement.clientHeight)
The height you are getting is more that likely because the design of firefox and chrome are different by a few pixels. I can resize my browser to however I want. Monitor and resolution also determines that. Not really an issue if you are designing your UI correctly, meaning using media queries in CSS and creating a responsive design instead of fixed values.

Changing device orientation doesn't swap width and height

I'm trying to set the size of a background image to match the screen size upon window resize. The problem is that width and height don't alternate their values when I change the mobile orientation. When I test it in the dev tools of a desktop browser it works, however when testing in several mobile browsers, although the orientation does get changed, the measures don't.
This is the basic js:
$(function() {
function resizeBackground() {
$('#background-image').height(screen.height);
}
resizeBackground();
$(window).resize(resizeBackground);
});
Unfortunately due to a weird vh bug on iOS I'm forced to use JS. The issue here is that the background image jumps when the browser address bar of some browsers, specially Chrome and Firefox, gets hidden. It's detailed here: stackoverflow.com/questions/24944925/.
Summarizing my comments I want to describe why your solution doesn't work:
window.screen.height and window.screen.width get you the device's actual height and width and these values don't change on page resize or orientation change.
For the viewport sizes (you actually need viewport) the appropriate methods (variables) are window.outerWidth and window.outerHeight (in some cases window.innerWidth and window.innerHeight will work also).
For getting actual document size (html document), use document.documentElement.clientWidth and document.documentElement.clientHeight.
For detecting orientation change I would suggest orientationchange event instead of onresize event, because onresize also fires when keyboard is shown for example.
Those mobile browsers should support the more specific orientationchange event. Perhaps they're only firing that one and not resize. Try handling orientationchange too.
window.addEventListener('orientationchange', resizeBackground);
For Mobile Safari you can check window.orientation and if it is 90/-90, choose smaller of width/height for your "height". When orientation is 0, then choose higher value. I have now observed that when opening Mobile Safari directly in landscape, the values are swapped and do not swap on orientation change. As window.orientation is deprecated, it should only be used for Mobile Safari. FOr the rest, we use window.screen.orientation.angle.

Set viewport size for a browser

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.

Preventing viewport resize of web page when android soft keyboard is active

I'm developing a Javascript/JQuery plugin for Responsive Web Design. It has a function that monitors the viewport for changes, specifically resize and orientation. When a change is detected, a corresponding callback function is called.
However, I just noticed that on Android (specifically using the stock browser on a Google Galaxy Nexus), if the user tries to use the soft keyboard, it resizes the viewport, thus firing the callback function. This is behaviour I would like to eliminate.
Is there a way to - via Javascript - disable this behaviour or detect for it so I can make changes to the code base to accommodate it?!
The solutions I've seen so far have to do mainly with Android App Development and I'm not sure they apply in my case.
Thanks.
Ok, well after some fiddling around I've found out a solution to my problem.
So what happens when the soft keyboard is shown/hidden?! In my test, the viewport width remains constant. However, the viewport height changes size [((current - previous)/previous)*100] when the soft keyboard is shown by 43% (in portrait) and by 58%(in landscape); and when the soft keyboard is hidden by 73%(in portrait) and 139%(in landscape) respectively.
So what I did was disable the callback function when the following conditions are all true:
The device is mobile
The percentage change in viewport width is less than 1%
The percentage change in viewport height is greater than 35%
Since mobile device browsers do not have resize handles like on the desktop, I do not believe there will arise a situation where a user will mimic the above conditions in a natural way.
You can see a sample of the code here: https://github.com/obihill/restive.js/blob/f051fe6611e0d977e1c24c721e5ad5cb61b72c1c/src/restive.js#L4419. Unfortunately, it's part of a bigger codeset, but you should be able to glean the basic idea based on the conditionals.
Cheers.
I had a similar problem. And my solution was to use the orientation change event instead of the resize event which triggers when you least expect it on android :P
$(window).bind( 'orientationchange', function(e){ // Type pretty code here });
source: http://www.andreasnorman.com/dealing-androids-constant-browser-resizing/
I can share you with my pretty code. I was setting trigger on resize event and counting height relative to before resize event.
originalHeight * 100 / currentHeight give you precent wich you can change height container
You can see a sample of the code here
https://jsfiddle.net/ocg9Lus7/
UPDATE 19.11.2018
I recomend you change value from dynamic (100%, vh etc.) to static value after onload window. If you need more dynamic container you can reculclate sizes by bynding function to resize event (originalHeight * 100 / currentHeight)
You can see a sample of the code here: https://jsfiddle.net/gbmo6uLp/

Categories