|
|
| 第1行： |
第1行： |
| /* 尘月维基：窄屏整页等比缩放 + 左侧栏强制常显 */ | | /* 尘月维基：窄屏整页等比缩放，保证手机与电脑看到完全相同的布局 */ |
| ( function () { | | ( function () { |
| var BASE = 1120; | | var BASE = 1120; |
|
| |
|
| /* 1) 整页等比缩放：按屏幕宽高一起算，让整页刚好塞进一屏（电脑、手机同一套逻辑） */
| |
| function fit() { | | function fit() { |
| var root = document.documentElement; | | var root = document.documentElement; |
| var vw = ( window.innerWidth || root.clientWidth ); | | var w = root.clientWidth; |
| var vh = ( window.innerHeight || root.clientHeight ); | | if ( w > 0 && w < BASE ) { |
| | | root.style.zoom = ( w / ( BASE + 64 ) ).toFixed(4); |
| /* 量一次 1:1 状态下的整页高度 */
| | } else { |
| var prev = root.style.zoom;
| | root.style.zoom = ''; |
| root.style.zoom = '1';
| |
| var h = root.scrollHeight || document.body.scrollHeight || 1;
| |
| root.style.zoom = prev;
| |
| | |
| if ( !vw || !vh ) { return; }
| |
| | |
| var z = Math.min( vw / BASE, vh / h ) * 0.99;
| |
| z = Math.max( 0.18, Math.min( 1.3, z ) );
| |
| root.style.zoom = z.toFixed( 4 );
| |
| }
| |
| | |
| /* 2) 左侧栏钉在正文左边：兜底手机浏览器 flex 降级时侧栏掉到页尾 */
| |
| function pinSidebar() {
| |
| var block = document.getElementById( 'mw-content-block' );
| |
| var nav = document.getElementById( 'mw-site-navigation' );
| |
| var wrap = document.getElementById( 'mw-content-wrapper' );
| |
| if ( !block || !nav || !wrap ) { return; }
| |
| | |
| var narrow = ( window.innerWidth || document.documentElement.clientWidth ) < 1200;
| |
| | |
| if ( !narrow ) {
| |
| [ block, nav, wrap ].forEach( function ( el ) {
| |
| [ 'display', 'float', 'width', 'flex', 'order',
| |
| 'position', 'visibility', 'max-width', 'min-width',
| |
| 'align-items' ].forEach( function ( p ) {
| |
| el.style.removeProperty( p );
| |
| } );
| |
| } );
| |
| return;
| |
| }
| |
| | |
| /* DOM 顺序兜底：侧栏若排在正文之后，挪到正文前面 */
| |
| if ( block.contains( nav ) && block.contains( wrap ) &&
| |
| ( nav.compareDocumentPosition( wrap ) & Node.DOCUMENT_POSITION_PRECEDING ) ) {
| |
| block.insertBefore( nav, wrap );
| |
| } | | } |
|
| |
| block.style.setProperty( 'display', 'flex', 'important' );
| |
| block.style.setProperty( 'align-items', 'flex-start', 'important' );
| |
|
| |
| nav.style.setProperty( 'display', 'block', 'important' );
| |
| nav.style.setProperty( 'float', 'none', 'important' );
| |
| nav.style.setProperty( 'position', 'static', 'important' );
| |
| nav.style.setProperty( 'visibility', 'visible', 'important' );
| |
| nav.style.setProperty( 'width', '186px', 'important' );
| |
| nav.style.setProperty( 'flex', '0 0 186px', 'important' );
| |
| nav.style.setProperty( 'order', '0', 'important' );
| |
| nav.style.setProperty( 'max-width', 'none', 'important' );
| |
|
| |
| wrap.style.setProperty( 'order', '1', 'important' );
| |
| wrap.style.setProperty( 'flex', '1 1 auto', 'important' );
| |
| wrap.style.setProperty( 'min-width', '0', 'important' );
| |
| }
| |
|
| |
| function run() {
| |
| fit();
| |
| pinSidebar();
| |
| } | | } |
|
| |
|
| if ( document.readyState === 'loading' ) { | | if ( document.readyState === 'loading' ) { |
| document.addEventListener( 'DOMContentLoaded', run ); | | document.addEventListener( 'DOMContentLoaded', fit ); |
| } else { | | } else { |
| run(); | | fit(); |
| } | | } |
| window.addEventListener( 'load', run );
| | window.addEventListener( 'resize', fit ); |
| window.addEventListener( 'resize', run ); | | window.addEventListener( 'orientationchange', fit ); |
| window.addEventListener( 'orientationchange', run ); | |
| }() ); | | }() ); |