前提・実現したいこと
予約が出来る出来ないを〇✖で出力する機能を作っています。
そこに色を付けくわえて、〇の場合は黒色・✖の場合は赤色で分かりやすく表示させたいです。
PC(chrome)でみると黒と赤がただしく出力されていますが、iPhone(safariとchrome)でみると✖が黒で表示されてしまいます。
スマホで正しく表示させる方法を教えて頂きたいです。
よろしくお願いいたします。
該当のソースコード
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ユーザートップ</title> <link href="style.css" rel="stylesheet" type="text/css" media="all"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <div class="wrapper" style=""> <main > <div class="container" > <div class="row"> <div class="col-xl-12" > <table class="table table-striped"> <thead> <tr> <th>店舗名</th> <th>入店可否</th> </tr> </thead> <tbody> <?php foreach($arr_shop as $key => $value) : ?> <tr> <th><a href="shopinfo.php?shop_id=<?= $value['shop_id'] ?>" ><?php echo htmlspecialchars($value['shop_name']);?></a></th> <th><?php $pt = htmlspecialchars($value['yesno']); $col = [1 => "black",2 => "red"]; $tx = [1 => "〇",2 => "✖"]; echo "<font color='" .htmlspecialchars($col[$pt])."'>"; echo htmlspecialchars($tx[$pt]); echo "</font>"; ?></th> <?php endforeach; ?> </tbody> </table> </div> </div> </div> </main> </div> </body> </html>
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。