Neither split view uses a CSS media query. Framework7 572,986 's resize module stores the app root's offsetWidth in app.width on every resize, and the view and panel compare it with their breakpoint using >=. This snippet logged the view's masterDetailBreakpoint event while Playwright 26,280 resized the window from 1024 px to 900, 767, 390 and 768:
const view = app.views.main;
const split = () => view.$el.hasClass('view-master-detail');
console.log(`start ${app.width}px split=${split()}`);
view.on('masterDetailBreakpoint', () => console.log(`${app.width}px split=${split()}`));Output
start 1024px split=true 767px split=false 768px split=true
The event fires only when the layout flips. Android's window size classes put 99.96% of phones in portrait below 600 dp and most portrait tablets at 600-840 dp; at 768 px the detail keeps 448 px beside the catalog. Style each mode through .view-master-detail, .page-master or .panel-in-breakpoint, and override --f7-page-master-width on :root to move the split.