Webページのサイズを大きくしたい。

現在、HTMLとCSSを利用して、チェックリストを作っています。
中身は非常に単純ですが...。
そこで、スマホで表示させたとき画像のように、サイズが小さくなってしまいます。
拡大すればいい話ですが神経質なもので...。

Chromeのデベロッパーツールを利用していますが実際スマホでもこうなります。
htmlやcssを見てみても理解できませんでした。
どなたかアドバイスお願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<title>チェックリスト</title>
7<link rel="stylesheet" type="text/css" href="css/index.css">
8
9<center>
10<h1>チェックリスト</h1>
11</center>
12<div class="cp_ipcheck">
13	<label>
14	<h2>【毎日】</h2>
15	<input type="checkbox" class="option-input02 checkbox"/>
16	りんご
17	</label>
18	<label>
19	<input type="checkbox" class="option-input02 checkbox"/>
20	みかん
21	</label>

CSS
1.cp_ipcheck {
2	width: 90%;
3	margin: 2em auto;
4	text-align: left;
5}
6@keyframes click-wave {
7	0% {
8		position: relative;
9		width: 30px;
10		height: 30px;
11		opacity: 0.35;
12	}
13	100% {
14		width: 200px;
15		height: 200px;
16		margin-top: -80px;
17		margin-left: -80px;
18		opacity: 0;
19	}
20}
21.cp_ipcheck .option-input02 {
22	position: relative;
23	top: 13.33333px;
24	right: 0;
25	bottom: 0;
26	left: 0;
27	width: 30px;
28	height: 30px;
29	margin-right: 0.5rem;
30	cursor: pointer;
31	transition: all 0.15s ease-out 0s;
32	color: #ffffff;
33	border: none;
34	outline: none;
35	background: #d7cbcb;
36	-webkit-appearance: none;
37	        appearance: none;
38}
39.cp_ipcheck .option-input02:hover {
40	background: #d6a9a9;
41}
42.cp_ipcheck .option-input02:checked {
43	background: #da3c41;
44}
45.cp_ipcheck .option-input02:checked::before {
46	font-size: 20px;
47	line-height: 30px;
48	position: absolute;
49	display: inline-block;
50	width: 30px;
51	height: 30px;
52	content: '';
53	text-align: center;
54}
55.cp_ipcheck .option-input02:checked::after {
56	position: relative;
57	display: block;
58	content: '';
59	-webkit-animation: click-wave 0.65s;
60	        animation: click-wave 0.65s;
61	background: #da3c41;
62}
63.cp_ipcheck .option-input02.radio {
64	border-radius: 50%;
65}
66.cp_ipcheck .option-input02.radio::after {
67	border-radius: 50%;
68}
69.cp_ipcheck label {
70	line-height: 40px;
71	display: block;
72}
73.cp_ipcheck .option-input02:disabled {
74	cursor: not-allowed;
75	background: #b8b7b7;
76}
77.cp_ipcheck .option-input02:disabled::before {
78	font-size: 20px;
79	line-height: 30px;
80	position: absolute;
81	display: inline-block;
82	width: 30px;
83	height: 30px;
84	content: '✖︎';
85	text-align: center;
86}
87@charset "utf-8";
88
89body {
90	margin: 0px;
91	padding: 0px;
92	color: #FFF;	/*全体の文字色*/
93	font-family:"sans-serif", sans-serif;	/*フォント種類*/
94	font-size: 12px;	/*文字サイズ*/
95	line-height: 2;		/*行間*/
96	background: #323232;	/*背景色*/

Lhankor_Mhy

2020/06/08 07:09

「Webページのサイズを大きくしたい」とのことですが、なにをどのように大きくしたいのか、具体的にご提示ください。

行動規範の内容に同意します

回答1件

ベストアンサー

viewportの記述がされていないように見えるのでご確認ください。

html
1<head>
2<meta name="viewport" content="width=device-width, initial-scale=1.0">
3</head>

参考

投稿2020/06/08 07:01

dit.

総合スコア3235

ntnt

2020/06/08 07:04

viewportが必要だったのですね... ずっとCSSをいじってました無事解決できました！ありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Webページのサイズを大きくしたい。

関連した質問