0
私は現時点でウェブサイトに取り組んでいます。私は高解像度でページスケールを対応しようとしています。高解像度のHTMLページをどのようにスケールするのですか？
現在のところ、ページはウィンドウのサイズ変更にうまく反応しますが、異なる解像度（特に高解像度）でページを試すと、すべてが非常に非常に小さくなります。
画面サイズが大きい場合、ページ上のすべての要素をユーザーに適切に拡大したいと考えています。
ここには、私のwebsiteという基本的なHTMLテンプレートのJSFiddleがあります。
とコードスニペット：
/* You can add global styles to this file, and also import other style files */
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: lightgrey;
position: absolute;
}
.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-container-vertical {
flex-direction: column;
}
.flex-item {
float: left;
height: 100%;
margin: 1px;
}
.header {
background-color: darkgreen;
height: 20px;
margin: 1px;
padding: 0px;
}
#work-area {
width: calc(100% - 2px);
height: calc(100% - 2px);
margin: 1px;
}
#bars {
width: inherit;
height: auto;
border: 0.5px solid black;
margin-bottom: 1px;
}
#pane-container {
border: 0.5px solid black;
}
#left-pane {
width: 20%
}
#centre-pane {
width: 60%;
}
#right-pane {
width: 20%;
}
#operation-catalogue-pane, #operation-editor-pane {
border: 0.5px solid black;
height: 50%;
}
#canvas-pane {
border: 1px solid black;
height: 70%;
}
#canvas {
margin: 1px;
height: calc(100% - 24px);
}
#lower-control-pane {
border: 1px solid black;
height: 30%;
width: calc(100% - 4px);
margin-bottom: 2px;
}
#lower-control {
margin: 1px;
height: 100%;
}
#workspace-tree-pane {
border: 1px solid black;
height: 40%;
}
#tabs-area {
height: inherit;
margin: 1px;
}<body>
<div id="work-area" class="flex-container flex-container-vertical">
<div id="bars" class="flex-item">
<div id="menu-bar" class="header">
<div class="overflowing-bar">
<div>
<a href="/pixi-test.html">Pixi sandbox</a>
</div>
</div>
</div>
<div id="tool-bar" class="header">
<div class="overflowing-bar">
<div>
<a href="/pixi-test.html">Pixi sandbox</a>
</div>
</div>
</div>
</div>
<div id="pane-container" class="flex-container flex-item">
<div id="left-pane" class="flex-item flex-container flex-container-vertical">
<div id="operation-catalogue-pane" class="flex-item">
<div id="operation-catalogue-header" class="header">
<div id="operation-catalogue-header-title">
</div>
</div>
<div id="operation-catalogue">
</div>
</div>
<div id="operation-editor-pane" class="flex-item">
<div id="operation-editor-header" class="header">
<div id="operation-editor-header-title">
</div>
</div>
<div id="operation-editor">
</div>
</div>
</div>
<div id="centre-pane" class="flex-item flex-container flex-container-vertical">
<div id="canvas-pane" class="flex-item flex-container flex-container-vertical">
<div id="canvas-pane-header" class="header">
</div>
<div id="canvas">
<pixi-component id="pixi-component"></pixi-component>
</div>
</div>
<div id="lower-control-pane" class="flex-item flex-container-vertical">
<div id="lower-control">
<lower-control-component id="lower-control-component" class="flex-container-vertical"></lower-control-component>
</div>
</div>
</div>
<div id="right-pane" class="flex-item flex-container flex-container-vertical">
<div id="workspace-tree-pane" class="flex-item">
<div id="workspace-tree-pane-header">
<div id="workspace-tree-pane-header-title">
</div>
</div>
<div id="workspace-tree">
</div>
</div>
</div>
</div>
</div>
</body>あなたは試してみて、あなたの周りのビューポートをドラッグすると、すべての要素がうまくリサイズすることがわかります。しかし、クローム開発ツールを使用して高解像度でウェブサイトを表示しようとすると、すべてが非常に小さくなります。緑色のヘッダーで最も明白です。
私がしたいことは、高解像度のためにページが適切に拡大するようにCSSを変更することです。そのため、要素が極端に小さくなることはありません。これどうやってするの？
編集：ここで私はここにlinkに記載された技術は、あなたのプロジェクトのために働くだろうと思い、私の頭の要素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WorkspacePrototype</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="workspace.png">
<script src="/assets/pixi.js"></script>
<script src="/assets/jquery-3.1.1.slim.min.js"></script>
</head>
メタビューポート要素を使用していますか？ – Rob
@Robはい。私はあなたが見ることができるようにヘッド要素を含めるために自分の投稿を編集しました。 – JavascriptLoser