css - 将固定大小的页面缩放到屏幕宽度?

标签 css html viewport fluid-layout firefox-os

在 Android 版 Chrome 40 上,缩放固定宽度的页面以适应屏幕宽度很简单。一种使用 viewport 元标记并指定内容的宽度并禁用用户缩放:

Screenshot showing content scaled to width in Chrome 40 for Android

在 Firefox OS 2.2 模拟器中,相同的代码工作:

Screenshot showing content scaled to width in

如何在 Firefox OS 浏览器中使固定宽度的内容适应屏幕宽度?

代码:

  • index.html:

    <!doctype html>
    
    <title>Viewport test</title>
    <link rel="stylesheet" href="index.css" />
    <meta name="viewport" content="width=1000,user-scalable=0" />
    
    Test
    
  • index.css:

    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        font-size: 50px;
        width: 990px;
        border: 5px solid lightblue;
    }
    

最佳答案

我使用了以下元标记并且它有效:<meta name="viewport" content="width=device-width, user-scalable=no">

关于css - 将固定大小的页面缩放到屏幕宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28820117/

相关文章:

Android:外部网站和 CSS 使用自定义字体 (Arial) 的 WebView

css - 为什么 block 级元素会这样?

javascript - 启用禁用按钮 html5/css/javascript

php - 使用 POST 更改 PHP session 变量

html - 为什么 MDN 建议在视口(viewport)标签中使用 initial-scale=0.86 和 minimum-scale=0.86 来抑制水平滚动?

html - 如何修复我的导航栏悬停的宽度?

css - 使用显示 :table for layout/presentational purposes?

javascript - 创建单词查找网格

android - 移动设备上的视口(viewport)如何缩放

javascript - 在视口(viewport)上对 SVG 元素进行动画处理