Responsive layout mobile'da desktop'un küçültülmüş hali gibi görünüyordu

Proje: Okul Platform · Hub: Okul Platform — Incidents

Semptom

Responsive layout (resources/views/responsive/) kullanan profiling sayfaları mobile’da, Tailwind breakpoint’leri (lg/md/sm) tam doğru olmasına rağmen, desktop layout’un küçültülmüş (CSS zoom uygulanmış) hali olarak render ediliyordu. Mobile drawer + mobile bar açılmıyordu, desktop mega menu küçük gösteriliyordu.

Root cause

resources/views/frontend/includes/head.blade.php (satır 22 + 27-40) legacy desktop-only sayfalar için yazılmış:

<meta name="viewport" content="width=1180, user-scalable=yes" id="viewport-meta">
<script>
    // isTouch + screen<1400 ise mobile kabul → viewport 1180 kalır,
    // document.documentElement.style.zoom = windowWidth/1180 uygulanır
</script>

Responsive master (responsive/layouts/master.blade.php) bu head’i include ettiği için mobile cihazlarda:

1. Viewport 1180px olarak kilitleniyor
2. document.documentElement.style.zoom ile sayfa küçültülüyor
3. Browser 1180px viewport’ta layout hesaplıyor → lg: breakpoint (≥1024px) aktif → desktop nav görünüyor
4. Zoom uygulandığı için sonuç desktop-shrunk

Çözüm (responsive/layouts/master.blade.php)

@include('frontend.includes.head')’ten hemen sonra override script:

<script>
(function () {
    var vp = document.getElementById('viewport-meta');
    if (vp) vp.setAttribute('content', 'width=device-width, initial-scale=1, viewport-fit=cover');
    if (document.documentElement.style.zoom) document.documentElement.style.zoom = '1';
    var ts = document.getElementById('tablet-overrides');
    if (ts) ts.remove();
})();
</script>

Ders

frontend/includes/head.blade.php desktop-only assumption içeriyor (repo’nun büyük kısmı responsive değil). Responsive layout’ları bu head’i include edecekse viewport override’ı render’dan önce (inline IIFE) uygulanmalı; aksi halde zoom bir kez uygulandıktan sonra undo etmek layout thrash yaratır.

Viewport override inline kalmak zorunda — external script defer/async olsa paint’ten önce çalışmaz.

Related

• 2026-04-16-inline-script-extraction-guidelines — Hangi inline script’ler blade’de kalmalı
• Okul Platform — Incidents