MediaWiki:Common.js:修订间差异

来自尘月维基
跳转到导航 跳转到搜索
Maintenance script​(留言 | 贡献)
缩放留白收尾
Admin​(留言 | 贡献)
无编辑摘要
第1行: 第1行:
/* 尘月维基:窄屏整页等比缩放,保证手机与电脑看到完全相同的布局 */
/* 尘月维基:窄屏整页等比缩放 + 左侧栏强制常显 */
( function () {
( function () {
var BASE = 1120;
var BASE = 1120;


/* 1) 窄屏整页等比缩放,保证手机与电脑布局完全一致 */
function fit() {
function fit() {
var root = document.documentElement;
var root = document.documentElement;
var w = root.clientWidth;
var w = ( window.innerWidth || root.clientWidth );
if ( w > 0 && w < BASE ) {
if ( w > 0 && w < BASE + 40 ) {
root.style.zoom = ( w / ( BASE + 64 ) ).toFixed(4);
root.style.zoom = ( w / ( BASE + 64 ) ).toFixed(4);
} else {
} else {
root.style.zoom = '';
root.style.zoom = '';
}
}
}
/* 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', fit );
document.addEventListener( 'DOMContentLoaded', run );
} else {
} else {
fit();
run();
}
}
window.addEventListener( 'resize', fit );
window.addEventListener( 'load', run );
window.addEventListener( 'orientationchange', fit );
window.addEventListener( 'resize', run );
window.addEventListener( 'orientationchange', run );
}() );
}() );

2026年10月31日 (六) 13:59的版本

/* 尘月维基:窄屏整页等比缩放 + 左侧栏强制常显 */
( function () {
	var BASE = 1120;

	/* 1) 窄屏整页等比缩放,保证手机与电脑布局完全一致 */
	function fit() {
		var root = document.documentElement;
		var w = ( window.innerWidth || root.clientWidth );
		if ( w > 0 && w < BASE + 40 ) {
			root.style.zoom = ( w / ( BASE + 64 ) ).toFixed(4);
		} else {
			root.style.zoom = '';
		}
	}

	/* 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' ) {
		document.addEventListener( 'DOMContentLoaded', run );
	} else {
		run();
	}
	window.addEventListener( 'load', run );
	window.addEventListener( 'resize', run );
	window.addEventListener( 'orientationchange', run );
}() );