hola, éste código trabaja 100% bien al abrirse con cualquier teléfono y cualquier browser PC:
Código:
<?php
echo <<<HTML
<html><head><style type="text/css">
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
background:teal;
color:#0f0400;
height:100%;
}
.tc{text-align:center;}
#menu_1_with_icon{
background:tan;
color:#000;
display:inline;
margin-top:-2px;
position:fixed;
}
#menu_1_with_icon:before{
border:1px solid #000;
content:'☰';
}
</style><meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head><body><div id="cosmos">
<div id="menu_1_with_icon"></div>
HTML;
echo str_repeat('<p class="tc">jump!</p>', 98);
echo '</div></body></html>';
sin embargo si agregas la línea:
Código:
echo '<table border="1"><tr><td>https://deliciasnaturales.com/stackoverflow/rwd/template_rwd_menu.php</td></tr></table>';
el "botón" del menú ☰ PIERDE la propiedad fixed. ( es decír al agregar CUALQUIER elemento que genere OVERFLOW )
- el error únicamente se aprecia al cargar desde teléfonos
- cuál es el error de mi código CSS?
- NO PRETENDO solucionar el "overflow"
- por qué la propiedad fixed se pierde?
- tiene solución sin utilizar ni librerias ni JQUERY ni BOOTSTRAP?
pueden abrir el código con un teléfono (SIN la tabla y CON la tabla) desde aquí:
https://deliciasnaturales.com/stackoverflow/rwd
( la tabla solo prodúce un OVERFLOW, es irrelevante; pueden utilizar CUALQUIER ELEMENTO que genere OVERFLOW y se dañará el "fixed" discúlpen que lo díga de nuevo: increiblemente únicamente sucede con ANDROID )