ここに私のウェブサイトへのリンクがあります。ノートパソコンは正常に動作していますが、携帯電話では反応しません。ここに私のサイトへのリンクがありますhttps://ticketsoko.co.ke/ とフォローは携帯電話でその表示方法です。携帯電話で画像をリサイズしたり、デスクトップに表示するのと同じように表示する方法はありますか? 私のウェブサイトをモバイルに対応させる方法
<head>
<meta charset="utf-8">
<!--<meta name="viewport"-->
<!-- content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="img/logoo.png"/>
<title>Click & Pay | TicketSoko</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7COpen+Sans" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" -->
<!-- integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> -->
<link rel="stylesheet" href="./css/main.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/style3.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class=" navbar-default navbar-fixed-top" style="background-color:#f2f2f2;">
<ul>
<img class="logo" src="img/logoo.png" alt="logo" style="height: 100px; width:250px; float:right;">
</ul>
</nav>
<div class="container-fluid">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<br><br><br>
<div class="item active">
<img src="img/image1.jpeg" alt="Los Angeles" style="width:100%; height:500px;">
</div>
<div class="item">
<img src="img/2.jpg" alt="Chicago" style="width:100%; height:480px;">
</div>
<div class="item">
<img src="img/3.jpg" alt="New york" style="width:100%; height:480px;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
ブートストラップを使用しているようです。これは良いスタートです。ブートストラップグリッドシステムを使用してレスポンシブデザインについて詳しく読むことができます。 https://v4-alpha.getbootstrap.com/layout/grid/ –