Thu, 2020-08-20 09:27
Hello,
I have an issue displaying my website well on mobile phones. http://www.restaurantdesarenes.ch/arenes/pizza/
Despite the viewport tag which should do the trick, it's looking huge.
Some tags are apparently forcing the website to appear too big. Any idea which one I should remove or modify?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta name="viewport" content="max-width=645, initial-scale=0.86, maximum-scale=0.86"> <title>Vite une pizza</title> <style> body { margin: 0; font-family: Arial, Helvetica, sans-serif; width: 100%; } .navbar { overflow: hidden; background-color: #000000; position: fixed; bottom: 0; width: 100%; } .main { padding: 0px; margin-bottom: 0px; } </style> </head> <body bgcolor="#000000" text="red"> <table width="655" border="0" bordercolor="#a00303" cellspacing="0" cellpadding="0" align="center" > <tr> <td align="center"><img src="titlebanner.jpg" width="655" height="143" /></td> </tr> <tr> <td> </td> </tr> <tr> <td align="center"> <h2> Livraisons à domicile et Vente à l’emporter !</h2> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="30"> </td> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="250" border="0" cellspacing="0" cellpadding="0" bordercolor="#ff0000" align="center" > <tr> <td align="center"><a href="pizza.asp?item=pizza"><img src="pizzaimg.jpg" width="250" height="129" border="0"/></a></td> </tr> </table> </td> </tr> <tr> <td align="center"><a href="pizza.asp?item=pizza"><img src="pizza.jpg" border="0" width="190" height="63" /></a></td> </tr> </table> </td> <td width="60"> </td> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="250" border="0" cellspacing="0" cellpadding="0" bordercolor="#ff0000" align="center" > <tr> <td align="center"><a href="pizza.asp?item=pates"><img src="pastaimg.jpg" width="250" height="129" border="0" /></a></td> </tr> </table> </td> </tr> <tr> <td align="center"><a href="pizza.asp?item=pates"><img src="pasta.jpg" width="190" height="63" border="0"/></a></td> </tr> </table> </td> <td width="30"> </td> </tr> <tr> <td width="30"> </td> <td> </td> <td width="60"> </td> <td> </td> <td width="30"> </td> </tr> <tr> <td width="30"> </td> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="250" border="0" cellspacing="0" cellpadding="0" bordercolor="#ff0000" align="center" > <tr> <td align="center"><a href="pizza.asp?item=boisson"><img src="boissonimg.jpg" width="250" height="129" border="0"/></a></td> </tr> </table> </td> </tr> <tr> <td align="center"><a href="pizza.asp?item=boisson"><img src="boisson.jpg" width="256" height="63" border="0"/></a></td> </tr> </table> </td> <td width="60"> </td> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="250" border="0" cellspacing="0" cellpadding="0" bordercolor="#ff0000" align="center" > <tr> <td align="center"><a href="pizza.asp?item=salade"><img src="saladeimg.jpg" width="250" height="129" border="0"/></a></td> </tr> </table> </td> </tr> <tr> <td align="center"><a href="pizza.asp?item=salade"><img src="salade.jpg" width="226" height="63" border="0"/></a></td> </tr> </table> </td> <td width="30"> </td> </tr> <tr> <td width="30"> </td> <td> </td> <td width="60"> </td> <td> </td> <td width="30"> </td> </tr> <tr> <td width="30"> </td> <td> <font color="red" size="4"><strong> Site Web : <a href="http://www.viteunepizza.ch" rel="nofollow">www.viteunepizza.ch</a><br /><br /> Téléphone : 026 / 675 42 22<br /><br /> Place de la foire 3 <br />1580 Avenches</strong> </font> </td> <td width="60"> </td> <td align="center"><img src="scooter.jpg" width="233" height="217" border="0" /></td> <td width="30"> </td> </tr> <tr> </table> </td> </tr> </table> <br /> <br /> <br /> <br /> <div class="navbar"> <table width="655" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td><img src="menubar.jpg" width="655" height="97" usemap="#Map" border="0" /></td> </tr> </table> </div> <map name="Map" id="Map"> <area shape="rect" coords="213,9,392,92" href="info.asp" /> <area shape="rect" coords="395,5,655,96" href="caddie.asp" /> </map> </body> </html>
Sat, 2020-08-22 14:25
#1
Tables are not responsive
Um, the viewport attribute isn't about responsiveness, but is there to force certain mobile browsers to ignore their own buggy behavior. It should read like so:
<meta content="width=device-width, height=device-height, initial-scale=1" name="viewport">
Responsiveness is controlled in the stylesheet. In fact if you don't have tables and don't have pixel measures, simple html reflows to fit the user agent, i.e. it is automagically responsive.
But, you have used tables for layout, a practice made obsolete by 1999. The table is a special use case structure where the meaning of its content is determined by its relative position to other elements of the table. You have no content that fits that bill.
The only fix is to rewrite your pages without any tables and without any styling attributes. Then create a stylesheet that includes responsive instructions for display in various devices.
g