如何使Chrome浏览器像Chrome浏览器的全屏模式（即不拉伸内容）

问题描述

我在我的游戏应用程序中使用了现代浏览器的全屏API，Chrome在这方面效果很好，并给出了一个窗口大小调整事件，允许根据新的全屏尺寸重新设置画布尺寸。 Firefox也尊重事件并允许重新调整大小，但是无论如何将画布延伸到全屏，所有图形和鼠标距离都会失真。

有谁知道如何让firefox在这方面的行为像chrome一样，即如何去除应用于canvas元素的自动css规则？ b

在窗口大小处理程序中执行以下操作在firefox中不执行任何操作

  var w = $（窗口）.WIDTH（）; 
 var h = $（window）.height（）; 
 var size = Math.min（w，h）; 
 
 var elem = document.getElementById（canvas）; 
 elem.style.width = size +px; 
 elem.style.height = size +px; 
  

我想也许这可以通过将画布放置在div容器中并且容器被拉伸允许调整画布的尺寸，从而保持纵横比。 不要设计画布，直接设置它的宽度：
$ b $ pre $ var elem = document.getElementById（canvas）;
elem.width = size;
elem.height = size;

更改画布的宽度和高度与CSS应该扭曲它不改变内在大小，就像任何其他图像。

I am using the fullscreen API of modern browsers for my game application, Chrome works great in this respect and gives a window resize event that allows the resetting of the canvas dimensions according to the new fullscreen size. Firefox also respects the event and allows re-sizing but anyway streches the canvas to the fullscreen, all graphics and mouse distances are distorted.

Does anyone know how to get firefox behaving like chrome in this regard, i.e. how to remove the automatic css rules applied to the canvas element?

doing the following in the window resize handler doesn't do anything in firefox

var w = $(window).width();
var h = $(window).height();
var size = Math.min(w,h);

var elem = document.getElementById("canvas");
elem.style.width = size+"px";
elem.style.height = size+"px";

I think maybe this can be done by placing the canvas centrally within a div container and the container is stretched allowing the canvas dimensions to be adjusted thus preserving the aspect ratio.

解决方案

Don't style the canvas, set it's width directly:

var elem = document.getElementById("canvas");
elem.width = size;
elem.height = size;

Changing the width and height of a canvas with CSS is supposed to distort it without changing the intrinsic size, just the same as with any other image.

这篇关于如何使Chrome浏览器像Chrome浏览器的全屏模式（即不拉伸内容）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！