html - 如何在不调整字体大小的情况下使网页在桌面和移动设备上可读?

标签 html css mobile

我希望能够以适用于桌面和移动设备的方式设置我的博客格式,而无需尝试检测移动浏览器。作为 web 标准的粉丝,我认为如果我只使用没有样式的基本 HTML,它应该是可用的,但事实证明 iPhone 和 Android 浏览器都使用小文本呈现(显然是为了复制布局在桌面浏览器上看到)。

我知道我可以使用媒体查询和许多其他技术来获得我想要的移动浏览器外观。我很想知道是否有任何方法可以让移动浏览器以设备默认字体大小显示某些内容,而无需求助于 font-size: 20pt;在样式表中。是否有任何一种“是的,这只是纯 HTML,所以不要假装你有桌面浏览器的宽度”?

最佳答案

viewport meta 为移动设备创造了奇迹。这将使视口(viewport)成为设备的大小,而不是试图使其变大并缩小:

<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

您可能会看到带有 width=device-width 等的其他版本。这会起作用,但它也会在横向模式下放大您的网页(我认为这是不受欢迎的)。使用所有这些比例约束将确保视口(viewport)的大小适合两个方向。

创建 viewport meta 的 Apple 拥有 documentation on it .

关于html - 如何在不调整字体大小的情况下使网页在桌面和移动设备上可读?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14791889/

相关文章:

javascript - 如何让我的模糊动画每次都运行得更快?

css - 删除两个部分之间的空白

javascript - 如何突出显示单击的图像并在列表中显示它的名称

php - 移动身份验证器如何工作

html - 为什么响应式网页设计在具有相同分辨率但不同 ppi 的屏幕上响应不同?

javascript - 304 延迟与内联 javascript

html - 展开以适应溢出的容器

css - 图像背景超过线条

javascript - iframe 触摸事件 preventDefault

javascript - 将页面保存为 HTML 文件,包括通过 JavaScript/jQuery 新添加的元素