Почему Firefox отличается от «адаптивного инструмента дизайна» от реального мобильного телефона?

Question

Я пытаюсь сделать заметку на сайте.Но я заметил, что есть разница между инструментом дизайна Firefox и моим iphone

Но когда я тестирую его на своеммобильное устройство (iphone 7+) Я получаю другой результат

Я надеюсь, что кто-то знает ответ на мою проблему.

Заранее спасибо.

PS .. Я использовал https://howchoo.com/g/mte2zgrhmjf/how-to-access-a-website-running-on-localhost-from-a-mobile-phone для доступа к сайту на моем телефоне

<style>
html{
    width: 100vw;
}
/*thead a:link{
        padding-left: 5px;
        padding-top: 5px;
        padding-bottom: 0px;
}*/
nav{
    display: none;
}
thead a:link  {
    color: #262626;
    padding: 13px 1px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.note{
    /*display: none;*/
}
.page-header{
    left: 50%;
}
h1{
    color:#262626;
}  
body{
    text-align: center;
    font-family: Arial;
}

ul {
    text-align: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #e6e6e6;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}
nav a:link {
    background-color: #e6e6e6;
    color: #262626;
    padding: 5px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
li {    
    float: left;
}
/*dropdown nav*/
.dropbtn {
    background-color: #4CAF50;
    color: white;
    /*padding: 16px;*/
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {  
    text-align: left;   
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    /*min-width: 160px;*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    width: 100%;
}
#bars{
    width: 22px;
    font-size: 25px;  
}

.dropdown-content a {
    text-align: left;
    color: black;
    padding: 10px 10px 10px 10px;
    text-decoration: none;
    display: block;
    width: 548px;
}

.dropdown-content a:hover {
    background-color: #009fe3;
    color: white;
}
.dropdown-content .active   {
    color: white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #009fe3;
}
/*dropdown nav end*/
#text{
    display: none;
}
.topnav-right a{
    height: 25px;
}
.topnav-right {
  float: right;
  list-style-type: none;
}


li a {
    display: block;
    color: #262626;
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #009fe3;
    color: white;
}
.active:hover{
    background-color:#009fe3;

}
.active {
    background-color: #262626;
    color: white;
}
/*form styling*/
.input_form {
    width: 90%; 
    margin: 30px auto; 
    border-radius: 5px; 
    padding: 10px;
    background: white;
    border: 1px solid #262626;
}
.input_form {
    color: red;
    margin: 0px;
}
.task_input {
    border-radius: 5px;
    width: 50%;
    height: 15px; 
    padding: 10px;
    border: 1px solid #262626;
}
.date_input {
    border-radius: 5px;
    width: 100px;
    height: 15px; 
    padding: 10px;
    border: 1px solid #262626;
}
.add_btn {
    cursor: pointer;
    height: 39px;
    background: white;
    color:  #262626;
    border: 1px solid #262626;
    border-radius: 5px; 
    margin: 5px;
    padding: 5px 20px;
}
.add_btn:hover{
    background: #009fe3;
    color: white;
}
table {
    width: 100%;
    margin: 30px auto;
    border-collapse: collapse;
}

tr {
    border-bottom: 1px solid #262626;
    height: auto;
}
tr a{
    height: auto;
}
th{
    height: auto;
}
th, td {
    text-align: left;
    font-size: 19px;
    color: #262626;
}

th, td{
    border: none;
    height: auto;
    padding: 2px;
}
td{
     border-left: 1px solid #262626;
    border-left: none;
}

tbody a:link {
    background-color: white;
    color: #262626;
    padding: 13px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.select{
    display: none;
}
/*complete button*/
.complete{
    text-align: center;
    width: 10px;
}
.complete a:visited{
    color: #262626;
}
.complete a{
    color: #262626;
    text-decoration: none;
}
.complete a:hover {
    background-color: #009fe3;
    color: white;
}
/*Delete button*/
.delete{
    text-align: center;
    width: 10px;
}
.delete a:visited{
    color: #262626;
}
.delete a{
    color: #262626;
    text-decoration: none;
}
.delete a:hover {
    background-color: #009fe3;
    color: white;
}
.restore{
    text-align: center;
    width: 10px;
}
.restore a:visited{
    color: #262626;
}
.restore a{
    color: #262626;
    text-decoration: none;
}
.restore a:hover {
    background-color: #009fe3;
    color: white;
}
/*completeAll button*/
.completeAll a:visited{
    color: #262626;
}
.completeAll a:hover {
    background-color: #009fe3;
    color: white;
}
/*restoreAll button*/
.restoreALL, .restoreALL a:visited{
    color: #262626;
}
.restoreALL a:hover {
    background-color: #009fe3;
    color: white;
}
/*Edit button*/
.edit  a:visited{
    color: #262626;
}
.edit{
    /*text-align: left;*/
    display: none;
    width: auto;
    text-align: center;
}
.edit a:hover{
    color:white;
    background-color: #009fe3;
}
.timer-off{
    color:red;
}
#form3{
    display: none;
}
#completed{
    display: none;
    float: center;
}
#link, #link:visited{
    color: red;
    float: right;   
}
#link1, #link1:visited{
    color: #009fe3;   
}
#title{
    cursor: pointer;   
} 
/*sort function styling for arrows*/
#up {
    display: inline-block;
    border: solid #262626;
    border-width: 0 3px 3px 0;
    padding: 3px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

#down {
    display: inline-block;
    border: solid #262626;
    border-width: 0 3px 3px 0;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
/*search button*/
#myInput {
  width: 50%;
  font-size: 16px;
  margin: 12px;
  color: #262626;
  padding: 12px 20px 12px 20px;
  border: 1px solid #262626;
  margin-bottom: 12px;
}
#myInput:focus{
    border: 1px solid #009fe3;
}
/*style login page/register page*/

label{
    float: left;
    color: black;
}
.form-control[type=text], .form-control[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.form-control1[type=text], .form-control1[type=date]{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.button {
    background-color: #009fe3;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
.button:hover {
    opacity: 0.8;
}


.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

img#randomImage {
    width: 40%;
    border-radius: 50%;
}
/*form edit.php and login.php */
#form{
    margin: auto;
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: table;
    width: 50%;
    margin: 5% auto 15% auto;
}
/*form index.php*/
#form4{
    margin: auto;
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: table;
    width: 50%;
}
/*form register.php*/
#form1{
    margin: auto;
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: table;
    width: 100%;
    margin: 1% auto 15% auto;
}
.form-group {
    padding: 16px;
}
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

img#randomImage {
    width: 40%;
    border-radius: 50%;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    #form{
        /*height: 50%;*/    
    }
}

.note1{
    width: auto;
}
.input_form {
    width: 80%; 
    margin: auto; 
    border-radius: 5px; 
    padding: 10px;
    background: white;
    border: 1px solid #262626;
}
#link2{
    font-size: 20px;
    font-style: normal;
    float: right;
    margin: 5px;
}
#link2:visited{
    color: #009fe3;
}
#link2:hover{
    color: red;
}
.note4{

}
.task p{
    font-size: 16px;
}
.date{
    float: right;   
    margin-top: 10px;
    width: auto;
}
@media screen and (min-width: 768px) {
.edit{
    display: block;
}
nav{
    display: block;
}
.date{
    float: right;
}
#text{
    display: block;
}
.dropdown{
    display: none;
}
.note{
    height: auto;
    display: table-cell;
}
.task_input{
    width: 70%;
    height: auto;
}
#myInput{
    width: 50%;
}
.select{
    display: block;
    font-size: 19px;
    width: auto;
    font-family: Arial;
    font-weight: bold;
    color: #262626;
}
@media screen and (min-width: 992px) {
.input_form p {
    color: red;
    margin: 0px;
}
.note{
    width: auto;
}
.note1{
    width: 70%;
    max-height: 300px;
}
.task_input {
    width: 80%;
    height: 15px; 
    padding: 10px;
    border: 1px solid #262626;
}
#myInput{
    width: 20%;
}
table {
    width: 80%;
}
</style>

<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta charset="UTF-8">
    <title>To-Do</title>
    <link rel="icon" href="img/to-do.png">
    <img style="display: none;" src="img_avatar2.png" id="randomImage" alt="some image" />
</head>	
<body>
	<nav>
		<ul>
  			<li title="Home">
  				<a href="index.php?Notes=Show" class="active">
  					<i class="material-icons">home</i>
  				</a>
  			</li>
			<li title="Completed tasks">
				<a href="completed.php?Notes=Show"><i class="material-icons">done</i></a>
			</li>
  			<li title="Users">
  				<a href="index-admin.php">
					<i class="material-icons">person</i>
  				</a>
  			</li>
  	  			<li title="Add Users">
  				<a href="register.php">
  					<i class="material-icons">person_add</i>
  				</a>
  			</li>
 			<div class="topnav-right">
			 <li title="Logout">
			 	<a href="logout.php">
			 		<i class="fa fa-sign-out" style="font-size:25px"></i>
			 	</a>
			 </li>
			</div>
		</ul>
	</nav>
<div class="dropdown">
	<i id="bars" class="fa fa-bars"></i>
		<div class="dropdown-content">
  			<a href="index.php?Notes=Show" class="active">
  					<i class="material-icons">home</i>
  			</a>
				<a href="completed.php?Notes=Show"><i class="material-icons">done</i></a>
			 					<a href="index-admin.php">
						<i class="material-icons">person</i>
  					</a>
 	  				<a href="register.php">
	  					<i class="material-icons">person_add</i>
	  				</a>

			<a href="logout.php">
			 	<i class="fa fa-sign-out" style="font-size:25px"></i>
			</a>
	</div>
</div>
    <div class="page-header">
        <h1>Hi, <b style="color:#009fe3"> </b>. Welcome.</h1>
    </div>
    <a href="#" id="link1" onclick="toggle_visibility('form');"><i style="font-size: 20px; font-style: normal;">Add a task</a><br>
    <!-- form input tasks -->
	<div id="form3">
    <form method="post" action="index.php?Notes=Show" id="form4">
    	 <a href="#" id="link2" onclick="toggle_visibility('form');"><i class="material-icons">close</i></a><br>
    	<div class="form-group">
    		<label>Title</label>
			<input type="text" maxlength="20" name="task" class="form-control1" placeholder="Title To-Do...">
		</div>
		<div class="form-group">
			<label>Date</label>
			<input  class="form-control1" type="date" id="dates" name="dates" min="<?php echo $today;?>" value="<?php echo $today;?>"> 
		</div>
		<div class="form-group">
			<label>Note</label>
		 	<textarea  name="note" class="form-control1" rows="10" cols="120" placeholder="Description To-Do..."></textarea><br>
		</div>
		<div class="form-group">
			<button type="submit" name="submit" id="add_btn" class="button">
				<i class="fa fa-plus"></i>`
			</button>
		</div>
	</form>
		</div>
	</form>
    <input type="text" id="myInput" autofocus="autofocus" onkeyup="myFunction()" placeholder="Search for anything..." title="Type something to search">
<table id="myTable">
	<thead>
		<!-- title for table -->
		<tr>
			<!-- message for no results found -->
			<!--<p id="message"></p> -->
			<th title="Completed all tasks" class="completeAll">
				<a onclick="return checkCompleteAll()" href="#"><i class=material-icons>done</i>ALL</a>
			</th>
			<th title="Sort By title" id="title"  onclick="sortTable(0)">Title
				<i id="up"></i>
				<i id="down"></i></th>
			<th><select class="select" name="note" onchange="location = this.value;">
		
					  	<option value="index.php?Notes=Show">Show Notes</option>
						<option value="index.php?Notes=Hide">Hide Notes</option>
					
						<option value="index.php?Notes=Hide">Hide Notes</option>
					 	<option value="index.php?Notes=Show">Show Notes</option>
					
			</select></th>
		</tr>

	</thead>

	<tbody>

	<!-- table content -->
			<tr>
				<th title="Complete task" class="complete"> 
					<a onclick="return checkComplete('<?=$row['id'] ?>')" href="#"><i class=material-icons>done</i></a>
				</th>
				<td class="task" style="width: auto;"><b></p>
				</td>					
				<th title="Edit task" class="edit" style="float: right; $color;">
						
				</th>
				<td class="date" >
				
				</td>
			</tr>
	</tbody>		
</table>
</body>
<script src="java.js"></script>	
</html>

Answer 1

В вашем HTML-файле есть метатег viewport в его голове?Выглядит это так:

<meta name="viewport" content="width=device-width, initial-scale=1">

Мобильный редактор Firefox, скорее всего, проигнорирует это и автоматически отрегулирует масштаб страницы.

Для меня скриншот iPhone выглядит так, как будто Safari анализирует страницутаким образом, когда он не ожидает, что страница будет оптимизирована для мобильных устройств, поэтому, по сути, пиксели не подстраиваются под расстояние просмотра устройства.

Еще одна вещь, которую следует учитывать, заключается в том, что Firefox и Safari неиспользовать одну и ту же базовую технологию, чтобы всегда были различия в конечных результатах.Вот почему лучше всего тестировать свои сайты в максимально возможном количестве браузеров, что, по-видимому, вы сделали, протестировав на реальном мобильном устройстве.

Чтобы узнать больше о мета-теге viewport, см. Firefox'sдокументация (это относится и к другим браузерам *)

(* Mozilla обычно включает таблицу совместимости, если есть исключение или нестандартное поведение)