iPhone7でCSSが反映されません


http://1811way.com/yuu01/ren135.php
をPCのブラウザ(Chrome)で横幅をスマホサイズ (max-width:480px)にすると
項目2、項目3の「・」が消えます。

僕の持っている実際のiPhone7で見ると消えません。(Safari,Chrome)
対処の方法を教えてください。
よろしくお願いします。

HTML(ren135.php)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="list.css" type="text/css">
</head>
<body>
<ul class="list1">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>

CSS(list.css)
@media only screen and (max-width:480px) {
li:not(:first-child){
list-style:none;
}
}

回答の条件
  • 1人1回まで
  • 登録:
  • 終了:2018/02/12 07:55:14
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:kaoato No.1

回答回数236ベストアンサー獲得回数86

ポイント300pt

viewportの指定をしてないからだと思います。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
@media only screen and (max-width:480px) {
	li:not(:first-child){
	list-style:none;
}
</style>

</head>
<body>
<ul class="list1">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>

こんな感じだとちゃんと動作します。

id:kohhi

お返事いただきありがとうございました。できました。また、よろしくお願いいたします。

2018/02/12 07:54:54

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません