https://thuonghieusanpham.vn/frontend/js/mobile.js?v=1791183902

1/* =========================
2   VIEWPORT META
3========================= */
4function getViewportMeta() {
5  let m = document.querySelector('meta[name="viewport"]');
6  if (!m) {
7    m = document.createElement('meta');
8    m.name = 'viewport';
9    document.head.appendChild(m);
10  }
11  return m;
12}
13
14function setDesktopViewport() {
15  getViewportMeta().content = 'width=1400';
16}
17
18function setMobileViewport() {
19  getViewportMeta().content = 'width=device-width, initial-scale=1';
20}
21
22/* =========================
23   DETECT DEVICE
24========================= */
25function isMobileDevice() {
26  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
27    || window.innerWidth <= 768;
28}
29
30/* =========================
31   DESKTOP SCALE
32========================= */
33function applyDesktopScale() {
34  const site = document.getElementById('site');
35  if (!site) return;
36
37  const BASE_WIDTH = 1400;
38  const scale = window.innerWidth / BASE_WIDTH;
39
40  site.style.width = BASE_WIDTH + 'px';
41  site.style.transform = `scale(${scale})`;
42  site.style.transformOrigin = 'top left';
43
44   document.body.style.overflow = 'auto';
45  document.documentElement.style.overflow = 'auto';
46
47  // const scaledHeight = site.scrollHeight * scale;
48  // document.body.style.height = scaledHeight + 'px';
49  // document.body.style.overflow = 'hidden';
50  // document.documentElement.style.overflow = 'hidden';
51}
52
53function removeDesktopScale() {
54  const site = document.getElementById('site');
55  if (!site) return;
56
57  site.style.transform = 'none';
58  site.style.width = '';
59  site.style.transformOrigin = '';
60  site.style.margin = '60px auto 0';
61
62  document.body.style.height = '';
63  document.body.style.overflow = '';
64  document.documentElement.style.overflow = '';
65}
66
67/* =========================
68   TOGGLE VIEW BUTTONS
69========================= */
70function updateViewButtons() {
71  const viewDesktopBtn = document.getElementById('view-desktop');
72  const viewMobileBtn = document.getElementById('view-mobile');
73
74  const mode = sessionStorage.getItem('viewMode');
75  const isMobile = isMobileDevice();
76
77  // 👉 Desktop thật → ẩn hết
78  if (!isMobile) {
79    if (viewDesktopBtn) viewDesktopBtn.style.display = 'none';
80    if (viewMobileBtn) {
81      viewMobileBtn.style.display = 'none';
82      viewMobileBtn.classList.remove('mobile-view-active');
83    }
84    return;
85  }
86
87  // 👉 Mobile + đang xem desktop
88  if (mode === 'desktop') {
89    if (viewDesktopBtn) viewDesktopBtn.style.display = 'none';
90
91    if (viewMobileBtn) {
92      viewMobileBtn.style.display = 'block';
93      viewMobileBtn.classList.add('mobile-view-active');
94
95      // fixed nổi
96      viewMobileBtn.style.position = 'fixed';
97      viewMobileBtn.style.bottom = '20px';
98      viewMobileBtn.style.right = '20px';
99      viewMobileBtn.style.zIndex = '9999';
100    }
101  }
102  // 👉 Mobile bình thường
103  else {
104    if (viewDesktopBtn) viewDesktopBtn.style.display = 'block';
105
106    if (viewMobileBtn) {
107      viewMobileBtn.style.display = 'none';
108      viewMobileBtn.classList.remove('mobile-view-active');
109    }
110  }
111}
112
113/* =========================
114   INIT
115========================= */
116document.addEventListener('DOMContentLoaded', function () {
117  const isMobile = isMobileDevice();
118  const mode = sessionStorage.getItem('viewMode');
119
120  if (isMobile && mode === 'desktop') {
121    setDesktopViewport();
122    applyDesktopScale();
123  } else {
124    setMobileViewport();
125    removeDesktopScale();
126    if (!isMobile) sessionStorage.removeItem('viewMode');
127  }
128
129  setTimeout(updateViewButtons, 100);
130
131  const viewDesktopBtn = document.getElementById('view-desktop');
132  const viewMobileBtn = document.getElementById('view-mobile');
133
134  if (viewDesktopBtn) {
135    viewDesktopBtn.onclick = function (e) {
136      e.preventDefault();
137      sessionStorage.setItem('viewMode', 'desktop');
138      location.reload();
139    };
140  }
141
142  if (viewMobileBtn) {
143    viewMobileBtn.onclick = function (e) {
144      e.preventDefault();
145      sessionStorage.removeItem('viewMode');
146      location.reload();
147    };
148  }
149});
150
151/* =========================
152   RESIZE
153========================= */
154let resizeTimer;
155window.addEventListener('resize', function () {
156  const isMobile = isMobileDevice();
157  const mode = sessionStorage.getItem('viewMode');
158
159  if (isMobile && mode === 'desktop') {
160    clearTimeout(resizeTimer);
161    resizeTimer = setTimeout(applyDesktopScale, 100);
162  }
163
164  updateViewButtons();
165});