javascript - 在 chrome 工具中获得正确的全屏相机，但在真实设备中获得更小的屏幕

Question

我正在制作一个使用设备摄像头的 PWA。我在 chrome 工具中获得了正确的全屏相机，但在真实设备中获得了更小的屏幕。我试过像这样设置宽度和高度，但这并没有解决错误：

width: { min: 640, ideal: 1920, max: 1920 },
height: { min: 400, ideal: 1080 }, 

固定的宽度和高度值解决了特定设备的问题，但不能解决所有设备的问题。

已通过约束

var constraints = {};

if(front===false){
    constraints = { video: {facingMode:  "environment",width: (window.screen.availWidth),
        height: (window.screen.availHeight) },frameRate: {max : 60},aspectRatio:1.777777778} ;
    console.log("Running rear camera");
}
else{
    constraints = { video: {facingMode: "user", width: (window.screen.availWidth),
        height: (window.screen.availHeight) },frameRate: {max : 60},aspectRatio:1.777777778} ;
    console.log("Running front camera.");
}

 navigator.mediaDevices.getUserMedia(constraints)
    .then(function (stream) {
        window.stream = stream;

        videoPlayer.srcObject = stream;

    })
    .catch(function (err) {
        console.log(err);
    });

左图<--：Chrome DevTools中的全屏

图片右->：相机在真实设备上不是全屏的

看看这里的演示代码： https ://github.com/NischalJakhar/NischalJakhar.github.io