Develop Reference

Object disappears when fabricJs canvas width and height is more than 4096px in chrome

I'm using fabricJs to add images to the canvas, And i'm changing the canvas width and height with canvas.setWidth(width,{backstoreOnly:true}) and canvas.setHeight(height,{backstoreOnly:true}), but when canvas width or height are more than 4096px, all object disappears in chrome, i tested it in Firefox everything works fine i can add width up to 10000px or more, but in chrome i can't add more than 4096px
does anyone know why it's working on Firefox but not chrome and how to fix it, because i searched a lot and didn't find any good solutions.
i don't know if this will help:
fabricjs version 4.4.0
chrome version 90.0.4430.93
Firefox version 78.10.0esr

Mobile - iOS - Safari - window.outerHeight returns 0

I am having an issue with window.outerHeight.
It returns 0 when run on the Safari browser on mobile. I have tested it on Android (Chrome) and it works fine.
I am on iOS9.
I want to know if there is a solution or an alternative that is supported on older devices.
It is not a timing issue.
Open the following on your iPhone:
http://jsfiddle.net/hfq0Ly1w/
alert(window.outerHeight);
You can see there are a lot of bugs on Safari by checking the height properties on your phone here:
http://ryanve.com/lab/dimensions/
Cheers!

Safari sets/ reads the height value differently. If you use the following you will be fine:
window.innerHeight
The above does the right calculation even if it appears wrong. It also adjusts the height if the browser tool bar appears on scroll.
You can see this happening on the link I provided:
http://ryanve.com/lab/dimensions/
Android won't take the toolbar into consideration. There is no way of working out the toolbar height dynamically with JS.
Cheers.

How to detect screen size for responsive web design?

I googled this and got a quirksmode site that gives you your screen size. Pulling up the console I see that screen.width and screen.height are directly available from the window object.
I want to do the detection in pure JavaScript to get started. Can I use this property across all devices and browsers - mobile, tablet, PC and Chrome, Safari, IE, Firefox.
I don't care about the view port changing due to re-sizing etc. Just the actual size of the screen which does not change.
I was hoping there was a single property I could check across devices and browsers.
Here is some general info by wikipedia on responsive web design.

Take a look at Get the device width in javascript
Media Queries work in js too:
if (window.matchMedia('screen and (max-width: 768px)').matches) {}
Another way would be:
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

screen.width is the property your are looking for.

This is what worked for me after long hunch.
These attributes below provide responsive sizes based on new tab size.
window.innerWidth
window.innerHeight

different window.width in chrome and native android browser

I just realized my website looks different in Chrome, as it looks in the native Android browser. I am using my Galaxy S3 to test. I am using Bootstrap with the mobile navigation (navigation changes to the nav-symbol when the window-width is less than 768). on Chrome i have the symbol, then i saw that i have the normal navigation in the Android browser.
To test i call $(window).width(). Chrome says 360px in portrait and 640px in landscape. These are the normal resolutions from the S3. When i call this in the native browser it says 444px in portrait and 790px in landscape. Everything is smaller than in Chrome.. and I don't get the mobile navigation on landscape (because this would happen when width<767... but here the browser says it's 790)
Does anyone know whats going on here?? Thanks for your time and help :) Greetings, gertnaster

Visual viewport detection in Firefox mobile browser

As the subject says, I need these zoom-tainted viewport dimensions (CSS-pixels) in Firefox mobile browser. How do I extract that?
In webkit browsers it goes by window.innerWidth / innerHeight and works fine, but I just can't find the corresponding values for Firefox.

I had the same problem and came up with the following solution:
Place a zero-pixel size "dummy" div in the bottom right corner of the screen (using "position:fixed") and query its position via getBoundingClientRect().left/top, which gives the width/height of the visual viewport.
Example code (querying only the width):
<div id="dummy" style="position:fixed;right:0;bottom:0"></div>
<button onclick="alert(
'innerWidth: ' + window.innerWidth + ' / ' +
document.getElementById('dummy').getBoundingClientRect().left
);">Test</button>
Loading the above web page in a browser and pressing the "Test" button will display the viewport widths as queried via the window.innerWidth and the getBoundingClientRect() methods.
On desktop Firefox, both methods yield the width of the visual viewport in CSS pixels, which depends on the window width and zoom level.
On mobile Firefox, window.innerWidth gives the width of the layout viewport (which is independent of zoom level, and pretty much useless for our purpose). On the contrary, the getBoundingClientRect() method does indeed yield the current width of the visual viewport in CSS pixels.
Tested on Desktop FF ver 19.0.2 and on Firefox mobile ver 24.0.

window.innerWidth
window.innerHeight
these two work for all browsers

This is easy with jQuery.documentSize (which I wrote). You can query the size of the layout viewport and the size of the visual viewport with it. It also handles the bug which affects the innerWidth, innerHeight implementations in older versions of Firefox.
Despite the name, it is written in vanilla Javascript, and you can use it without jQuery, too.
visualWidth = $.windowWidth( { viewport: "visual" } );
layoutWidth = $.windowWidth( { viewport: "layout" } );
Likewise for height.
(This question is really old, and the participants probably won't care, but at least it has prompted me to test jQuery.documentSize with Firefox for Android, which I hadn't done yet. Works as expected.)