We Keep Coding

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.

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.

Android Native Browser duplicating HTML5 canvas (fine in chrome)

This is a weird issue that I am only experiencing on a Native browser on Samsung Galaxy Tab 2 and Galaxy S2 in the native browser.
This has also been tested on other android phones and tablets such as the Nexus 7 & Galaxy S4 but their native browser is chrome, so it appears fine. This issue is also not present on any IOS browsers, Windows Desktop browsers or Mac Desktop browsers.
It's almost asif the webpage is loaded twice ontop of itself!
As there is a duplicate canvas element, that updates as the main canvas does.
Here it appears asthough it only happens when rotated in landscape mode, but I beleive that in portrait mode, the canvas' are perfectly aligned over the top.
What is even weirder, the menu button that you see is a toggle button, tap to open menu, tap to close menu. On this device when you tap it, it opens and closes instantly. the same happens for the mute button toggle.
I'm completely at a loss.
I have done some javascript debugging throwing in a few alerts here and there, and the initialisation functions that create references to the canvas and so on are only called once.
I have read and heard about hardware acceleration causing issues, but solutions i've potentially found are only relative to building native apps! not HTML5 Canvas webpages.
Any insight on this could be would be great!
Thanks in advance.
--EDIT
I also put in this test alert(document.getElementsByTagName('canvas').length); to see if there was 2 canvas in the DOM but it returns 1!

I ran into this same issue. I was able to fix this by running the following code after making a change to my canvas:
// If Samsung android browser is detected
if (window.navigator && window.navigator.userAgent.indexOf('534.30') > 0) {
// Tweak the canvas opacity, causing it to redraw
$('canvas').css('opacity', '0.99');
// Set the canvas opacity back to normal after 5ms
setTimeout(function() {
$('canvas').css('opacity', '1');
}, 5);
}
By tweaking the opacity, this forced the canvas to redraw and removed the duplicate shapes. It's a dumb fix but it works. Hopefully this helps someone.

Also you may look at this collections of such tips: http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/

For double canvas issue there is a bug logged https://code.google.com/p/android/issues/detail?id=35474 you may want to check suggested solutions.
In my case this issue appeared only if I had Force GPU rendering enabled.
Issue usually appears if you have some parent element for canvas that has CSS overflow: hidden

remove overflow property from all canvas parents,probably we don’t need this property on touch devices:
$("canvas").parents("*").css("overflow", "visible");
It is well explained at http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/

Reset / change zoom via javascript on Mobile Safari Web App

This issue has been discussed here before, however, I don't get the suggested solution to work.
I want to change the scale / zoom of a webpage on a mobile safari via JS. The solution suggested by
How can I use JavaScript to set the zoom level on mobile safari?
Mobile Safari Web App Zoom issue
Is is possible to change page zoom in Mobile Safari via Javascript?
is to set the "viewport" meta tag.
I tried this, but the scale is not changed.
$('meta[name="viewport"]').attr('content', 'width=device-width, user-scalable:no');
When does safari interpret the viewport setting? Only when loading a page or also when the value is changed programmatically (what I would expect with repsect to the answers of the questions mentioned above)?
Did this behaviour change in some iOS version?
BTW: Where can a find a list of recognized arguments for viewport?
Many thanks for any suggestion!

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/