表格中的字体在移动浏览器中呈现不一致 [英] fonts in tables rendering inconsistently on mobile browsers
问题描述
我当前正在创建一个桌面站点( http://www.robtest.org.uk )我想与移动浏览器一起很好地工作，以减轻创建单独的移动站点的需要.移动浏览器似乎可以放大大块文字的字体(很好).问题出在我用于内容而不是布局的表上.宽列中的字体会按比例放大以使其可读，而宽列中的字体会被忽略.
I am currently creating a desktop site (http://www.robtest.org.uk) that I want to work well with mobile browsers to alleviate the need to create a separate mobile site. Mobile safari appears to scale up the fonts of large blocks of text (which is fine). The problem is with tables which I use for content rather than layout. The fonts in the wide columns are scaled-up to make it readable while those in the smaller width columns are ignored.
我当前一致地呈现表的解决方法是:
My current workaround to render tables consistently is:
@media only screen and (max-device-width: 480px) {
#container td { -webkit-text-size-adjust:100% }}
它对于以下页面效果很好: http://www.robtest.org.uk/audio_catalogue.html
It does work well for pages such as: http://www.robtest.org.uk/audio_catalogue.html
但是对于像包含我们的事件详细信息的表那样，它不是理想的: http://www.robtest.org.uk/events.html
But it's not ideal for tables like those containing our event details such as: http://www.robtest.org.uk/events.html
在后一种情况下，我宁愿按比例放大所有字体，以使页面保持一致，而不仅仅是右栏.
In the latter I'd much rather have all the fonts scaled-up so that the page is consistent rather than just the right hand column.
有什么办法吗?
非常感谢您的帮助.
谢谢，Dougie:)
Thanks, Dougie :)
推荐答案
在页面的< head> 部分中添加视口标签，这将有助于防止设备缩放/缩放并为您提供跨移动设备的统一外观
Add a viewport tag in the <head> section of your page, it will help prevent device scaling/zooming and give you a uniform look across mobile devices
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
这篇关于表格中的字体在移动浏览器中呈现不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
