65 lines
2.6 KiB
JavaScript
65 lines
2.6 KiB
JavaScript
|
#!/usr/bin/env node
|
||
|
|
|
||
|
|
import { chromium } from 'playwright';
|
||
|
|
|
||
|
|
const LANDSCAPE_VIEWPORT = { width: 667, height: 375 };
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const browser = await chromium.launch({ headless: true });
|
||
|
|
const context = await browser.newContext({
|
||
|
|
viewport: LANDSCAPE_VIEWPORT,
|
||
|
|
userAgent: 'Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.91 Mobile Safari/537.36',
|
||
|
|
hasTouch: true
|
||
|
|
});
|
||
|
|
const page = await context.newPage();
|
||
|
|
|
||
|
|
await page.goto('http://localhost:1999/?lang=en&view=extended');
|
||
|
|
await page.waitForLoadState('networkidle');
|
||
|
|
|
||
|
|
const debug = await page.evaluate(() => {
|
||
|
|
const page1 = document.querySelector('.page-1 .page-content');
|
||
|
|
const computed = window.getComputedStyle(page1);
|
||
|
|
|
||
|
|
// Check media query matches
|
||
|
|
const landscapeMatch = window.matchMedia('(max-width: 915px) and (orientation: landscape)').matches;
|
||
|
|
const maxWidth915 = window.matchMedia('(max-width: 915px)').matches;
|
||
|
|
const orientationLandscape = window.matchMedia('(orientation: landscape)').matches;
|
||
|
|
const maxWidth768 = window.matchMedia('(max-width: 768px)').matches;
|
||
|
|
|
||
|
|
return {
|
||
|
|
viewport: {
|
||
|
|
width: window.innerWidth,
|
||
|
|
height: window.innerHeight,
|
||
|
|
ratio: window.innerWidth / window.innerHeight
|
||
|
|
},
|
||
|
|
mediaQueries: {
|
||
|
|
'max-width: 915px': maxWidth915,
|
||
|
|
'orientation: landscape': orientationLandscape,
|
||
|
|
'max-width: 915px AND landscape': landscapeMatch,
|
||
|
|
'max-width: 768px': maxWidth768
|
||
|
|
},
|
||
|
|
gridColumns: computed.gridTemplateColumns,
|
||
|
|
bodyOverflow: window.getComputedStyle(document.body).overflowX,
|
||
|
|
htmlOverflow: window.getComputedStyle(document.documentElement).overflowX
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('Landscape Debug Info:\n');
|
||
|
|
console.log('Viewport:');
|
||
|
|
console.log(` • Width: ${debug.viewport.width}px`);
|
||
|
|
console.log(` • Height: ${debug.viewport.height}px`);
|
||
|
|
console.log(` • Ratio: ${debug.viewport.ratio.toFixed(2)} (${debug.viewport.ratio > 1 ? 'LANDSCAPE' : 'PORTRAIT'})\n`);
|
||
|
|
|
||
|
|
console.log('Media Query Matches:');
|
||
|
|
Object.entries(debug.mediaQueries).forEach(([query, matches]) => {
|
||
|
|
console.log(` • ${query}: ${matches ? '✅ YES' : '❌ NO'}`);
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log(`\nComputed Styles:`);
|
||
|
|
console.log(` • Grid columns: ${debug.gridColumns}`);
|
||
|
|
console.log(` • Body overflow-x: ${debug.bodyOverflow}`);
|
||
|
|
console.log(` • HTML overflow-x: ${debug.htmlOverflow}\n`);
|
||
|
|
|
||
|
|
await browser.close();
|
||
|
|
})();
|