プロジェクトに取り組んでいるとき、さまざまな解像度のコンピューターに表示された大画面のページでさまざまな効果が発生することに遭遇しました。ページにはさまざまなモジュールが多数あるため、さまざまなページを作成し、さまざまな解像度のコンピュータにさまざまなパスを表示することにしました。
1 つの方法は、ホームページとして別のページを使用し、ホームページに解像度を検出させてから、対応するページに移動して、次の「ページ 1」、「ページ 2」、「ページ 3」を配置することです。 , 速度に影響を与えることなく、「ページ 4」が Web ページに変更されます。
以下の変更したファイルを Web ページとして保存するだけです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>不同分辨率显示不同页面问题</title>
<script>
function redirectPage() {
var url1360x768 = "页面一";
var url1920x1080 = "页面二";
var url2560x1440 = "页面三";
var url="页面四"
if ((screen.width == 1360) && (screen.height == 768))
window.location.href = url1360x768;
else if ((screen.width == 1920) && (screen.height == 1080))
window.location.href = url1920x1080;
else if ((screen.width == 2560) && (screen.height == 1440))
window.location.href = url2560x1440;
else window.location.href = url;
}
</script>
</head>
<body onload="redirectPage()">
……
</body>
</html>表示効果は次のとおりです。
