Geek Answers Handbook

Strange iPhone rotation behavior for TD with colspan

This is about showing a simple HTML page in an iPhone browser with rotation.

Customization : two identical tables, but one of them has a width (CSS) of 69%, and the other is 100%.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = yes" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>Test</title> <style> table { border-collapse: collapse; } th { font-weight: normal; border: 1px solid red; } td { border: 1px solid green; } #t1 { width: 69%; } #t2 { width: 100%; } </style> </head> <body> <table id="t1"> <tr><th colspan="2">TH COLSPAN 2</th></tr> <tr><td colspan="2">TD COLSPAN 2</td></tr> <tr><td>CELL 1</td><td>CELL 2</td></tr> </table> <hr /> <table id="t2"> <tr><th colspan="2">TH COLSPAN 2</th></tr> <tr><td colspan="2">TD COLSPAN 2</td></tr> <tr><td>CELL 1</td><td>CELL 2</td></tr> </table> </body> </html>

Behavior : although two tables are displayed with the same font size in the default orientation (portrait), when the device is rotated, TDs / TH with COLSPAN = 2 in font size are displayed in the full-width table (screenshots taken from iPhone):

PortraitLandscape

This seems to be a bug in Safari, but nonetheless I need to get around this.

Any idea on a decent workaround?

Thanks.

+4
source share
1 answer

This is because sometimes Safari webview automatically prints text when it thinks it is a good idea.

To disable this behavior, add it to your body. CSS style:

-webkit-text-size-adjustment: no;

+3
source

More articles:


All Articles