如何使firefox全屏模式像chome（即不streching内容）

问题描述

我使用现代浏览器的全屏API用于我的游戏应用程序，Chrome在这方面非常出色，并提供了一个窗口大小调整事件，允许根据新的全屏幕大小重置画布尺寸。 Firefox还尊重事件并允许重新调整大小，但无论如何，将画布拖动到全屏，所有图形和鼠标距离都会失真。

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.

有没有人知道如何让firefox在这方面表现得像chrome一样，即如何删除应用于canvas元素的自动css规则？

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?

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

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";

我想也许这可以通过将画布集中放置在div容器中，允许调整画布尺寸，从而保持宽高比。

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.

如果有人有更好的想法？

If anyone has any better ideas?

干杯

Dave

推荐答案

$ c> canvas ，直接设置它的宽度：

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

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

更改画布的宽度和高度使用CSS应该扭曲它，而不改变内在的大小，只是一样与任何其他图像。

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.

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