Javascript 在chrome工具中获得正确的全屏摄像头，但在真实设备中获得更小的屏幕

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

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

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

通过的约束条件

左图：真实设备上的摄像头不是全屏的

在此处查看演示代码：

---

你试过检查一下吗？@noogui我看过这篇文档。它改善了捕获图像的图像质量，并添加了一些相机功能，但问题仍然存在。

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);
    });