AR.js
AR.js copied to clipboard
Samsung Internet zoom/scaling issue
What is the current behavior? On Samsung Internet browser whole page is zoomed in. If initial load is on landscape mode, everything is fine until first orientation change. Bug happens only with Appearance->Control the zoom on webpages enabled (default configuration). Tried playing with meta viewport tag with no luck. Yes, I understand this is Samsung Internet bug/problem but I'm hoping to find a work-around.
If the current behavior is a bug, please provide the steps to reproduce. Open an example with Samsung Internet with default settings on portrait orientation.
Please mention other relevant information such as the browser version, Operating System and Device Name Samsung Internet (latest), Samsung S10
I can also confirm there are scaling, sizing issues on the Samsung S7 Chrome browsers.
It works fine on iPhoneX safari and Google Pixel Chrome but three.js components and html completely scales down when viewed on Samsung. From all the Googling, I think it has to do with how Samsung is handling the scaling around dpi. I am not sure of this.
If u have the embeed tag in ure scene. Remove it and afterwards it should works fine. But i ran into a similiar bug:
Something similar is happening to me. I am using Chrome on a Samsung Galaxy S8 and in my scene there is a cube in the (0, 0, 0) position. When the device is in vertical orientation it shows on the left.
However, when I use it horizontally it shows up more on the center.
And if I test it on my PC with Droidcam it shows up on a completely different position.
i can confirm that the zoom is not correct on my Huawei P20. i think the wrong camera is used for scanning. My device is having 3 back cameras.
might be related to: https://github.com/AR-js-org/AR.js/issues/26
Stuff is extremely zoomed in when I use the Samsung Internet Browser :-/
When I make my screen fullscreen with javascript the zoom is right, The body width and height are stuck at a large numbere height 2288px and width 3050px I can't change them as there seems to be some body onresize function running
toggleFullScreen = () => {
console.log('make full screen');
var doc = window.document;
var docEl = doc.documentElement;
var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
requestFullScreen.call(docEl);
} else {
cancelFullScreen.call(doc);
}
}
So I change my screen to full size by running the above function and height and width get set to 692px and 922px Hopefully this will help someone debug this issue
Hi, I had this problem too, when I use Samsung Internet Browser , camrea view dose not open in full view , but it's works good at chrome ,after two day , I fix this with this code , I don't know why , but it works for me , in both orientation
const myHeight =window.innerWidth *window.devicePixelRatio
const myWidth = window.innerHeight*window.devicePixelRatio
var arToolkitSource = new THREEx.ArToolkitSource({
sourceType: 'webcam',
// resolution of at which we initialize the source image
sourceWidth: myWidth,
sourceHeight: myHeight,
// resolution displayed for the source
displayWidth: myWidth,
displayHeight: myHeight,
})
I hope it will be use full https://user-images.githubusercontent.com/45766071/123690581-c698cb00-d869-11eb-8676-7351e8b268cd.mp4
Experiencing the same issue on the Samsung browser. When resizing the camera looks zoomed in and the AR content does not appear in the correct place. Changing this setting in the Samsung browser fixed the issue for me: Settings > Appearance > Control the zoom on webpages (turn off)
Using an iframe helped me to fix it on my Samsung S6 (in the Samsung browser). Solution from here: https://stackoverflow.com/a/14738668/5028033
This is what I use now as iframe "container". Project code is in project.html then: https://pastebin.com/EKRLwQEz