https://welcometoibiza.com/wp-content/plugins/wti-core/js/tablet-landscape-viewport.js

1/**
2 * =============================================================================
3 * TABLET LANDSCAPE VIEWPORT OVERRIDE
4 * =============================================================================
5 * Archivo: wti-core/js/tablet-landscape-viewport.js
6 * Creado:  2026-03-25
7 * Actualizado: 2026-03-27
8 * Autor:   Ideas Ibiza Publicidad SL
9 *
10 * Fuerza la versión desktop en tablets GRANDES en modo landscape (horizontal).
11 * Las tablets pequeñas (9.7" como iPad 6ª gen) mantienen su vista normal.
12 *
13 * LÓGICA:
14 * - Tablets pequeñas (768–1024px landscape): NO se fuerza desktop.
15 *   Ejemplo: iPad 9.7" (6ª gen) → 1024x768 en landscape → mantiene tablet/responsive
16 *
17 * - Tablets grandes (1025–1366px landscape): SE FUERZA desktop (width=1200).
18 *   Ejemplo: iPad Air 10.5" (1112px), iPad Pro 11" (1194px), iPad Pro 12.9" (1366px)
19 *
20 * - Si vuelve a portrait o no es tablet, restaura el viewport original.
21 * - Escucha orientationchange y resize para reaccionar en tiempo real.
22 *
23 * BREAKPOINTS DE REFERENCIA (Elementor defaults):
24 * - Mobile:  ≤ 767px
25 * - Tablet:  768px – 1024px (Elementor default)
26 * - Desktop: > 1024px
27 *
28 * DISPOSITIVOS AFECTADOS:
29 * ┌──────────────────────────┬────────────────┬──────────────┐
30 * │ Dispositivo              │ Landscape (px) │ Comportamiento│
31 * ├──────────────────────────┼────────────────┼──────────────┤
32 * │ iPad 9.7" (6ª gen)       │ 1024 x 768     │ NORMAL (tablet)│
33 * │ iPad Air 10.5"           │ 1112 x 834     │ FORZAR desktop │
34 * │ iPad Pro 11"             │ 1194 x 834     │ FORZAR desktop │
35 * │ iPad Pro 12.9"           │ 1366 x 1024    │ FORZAR desktop │
36 * │ Samsung Galaxy Tab S7    │ 1138 x 720     │ FORZAR desktop │
37 * │ Samsung Galaxy Tab S8+   │ 1280 x 800     │ FORZAR desktop │
38 * └──────────────────────────┴────────────────┴──────────────┘
39 * =============================================================================
40 */
41(function () {
42    'use strict';
43
44    // Umbral mínimo: solo forzar desktop en tablets con landscape > 1024px
45    var MIN_WIDTH_FOR_DESKTOP = 1025;
46    var MAX_WIDTH_FOR_TABLET  = 1366;
47    var FORCED_VIEWPORT_WIDTH = 1200;
48
49    /**
50     * Comprueba si el dispositivo es una tablet GRANDE en landscape y ajusta el viewport.
51     *
52     * - Tablet grande en landscape: 1025px ≤ innerWidth ≤ 1366px Y ancho > alto
53     * - iPad 9.7" (1024px landscape) queda EXCLUIDO → mantiene vista responsive
54     */
55    function checkTabletLandscape() {
56        var width  = window.innerWidth;
57        var height = window.innerHeight;
58        var isLargeTablet = width >= MIN_WIDTH_FOR_DESKTOP && width <= MAX_WIDTH_FOR_TABLET;
59        var isLandscape   = width > height;
60        var viewport      = document.querySelector('meta[name="viewport"]');
61
62        if (!viewport) {
63            return; // Sin meta viewport, no hacemos nada
64        }
65
66        if (isLargeTablet && isLandscape) {
67            // Tablet grande en landscape → forzar vista desktop
68            viewport.setAttribute('content', 'width=' + FORCED_VIEWPORT_WIDTH + ', initial-scale=1.0');
69        } else {
70            // Todo lo demás (móviles, tablets pequeñas, desktop real) → viewport normal
71            viewport.setAttribute('content', 'width=device-width, initial-scale=1.0');
72        }
73    }
74
75    // Ejecución inicial
76    checkTabletLandscape();
77
78    // Re-check al cambiar orientación (con delay para que el navegador actualice dimensiones)
79    window.addEventListener('orientationchange', function () {
80        setTimeout(checkTabletLandscape, 300);
81    });
82
83    // Re-check al redimensionar ventana
84    window.addEventListener('resize', checkTabletLandscape);
85})();