Определить, развернуто ли окно браузера, и по умолчанию (100%) увеличить

Question

Я знаю, это звучит странно, но на самом деле есть причина, и это отвечает интересам пользователей. Я знаю, что иметь браузер, который автоматически максимизирует и устанавливает 100%, может быть проблематично, но как насчет того, чтобы, если окно не было максимизировано, а масштаб не был 100%, все пользователи увидели бы сообщение "Пожалуйста, максимизируйте свое окно и установите увеличить до 100%". Мне нужно, чтобы это работало в Chrome, Firefox и IE ... по крайней мере.

Я не пытаюсь сделать его "полноэкранным режимом", просто разверните окно.

Если "форсировать" в смысле "держать" 100% и максимальное окно проблематично, как насчет просто установить масштаб на 100% и максимизировать окно при начальной загрузке?

Answer 1

Определить, если на максимальной ширине:

Возможно, вы захотите проверить, меньше ли ширина документа, чем ширина экрана:

var isAtMaxWidth = screen.availWidth - window.innerWidth === 0;

Однако вы не можете сделать это с высотой, так как браузер зарезервировал вертикальное пространство для вкладок и панелей инструментов, и невозможно получить их высоту.

Определить масштаб браузера:

Основанный на этом ответе user800583, вот сокращенная версия:

var screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
var isAtDefaultZoom = screenPixelRatio > 0.92 && screenPixelRatio <= 1.10;

NB: вы не можете использовать window.devicePixelRatio чтобы определить это, дисплеи с высоким разрешением (например, сетчатка) будут иметь разные базовые значения.

Комбинированная проверка:

var isMaximizedAndDefaultZoom = isAtMaxWidth && isAtDefaultZoom;

---

Протестировано и работает на Chrome 64 по состоянию на 06 марта 2018 года.

Answer 2

Я заметил, что если я щелкну и перетащу все окно в верхнюю часть экрана, чтобы оно защелкнулось/развернется, screen.availHeight и window.outerHeight будут равны, поэтому я подумал, что могу использовать это само по себе для проверки максимизации высоты.

Однако, если я только перетащу верхнюю часть окна вверх, чтобы она привязалась к максимуму, разница в этих значениях составляет 7.

Чтобы учесть особый случай перетаскивания кончика окна в верхнюю часть экрана, я добавил условное выражение. Я бы сделал эту условную проверку того, равно ли абсолютное значение числу 7, а не больше ли разница 30, но я не думаю, что эти пропорции будут одинаковыми для всех настроек. Вторая проверка высоты предназначена для случаев, когда внизу страницы открываются такие вещи, как инструменты разработчика.

      let isWindowWidthMaximized = screen.availWidth - window.innerWidth === 0;
let isWindowHeightMaximized = false
if(Math.abs(screen.availHeight - window.outerHeight) <= 30 && window.innerHeight/((window.innerHeight + window.outerHeight)/2) >.8) {
    isWindowHeightMaximized = true
} else {
    isWindowHeightMaximized = false
}