jjzjj

javascript - 有没有办法为浏览器指定最小和最大缩放级别？

coder 2024-07-15 原文

最新的浏览器允许使用 CTRL +- 、CTRL-鼠标滚轮以及触控板上的两个手指捏合手势来更改缩放级别。虽然我自己觉得这个功能非常方便(各种网站上的字体通常太小，我无法阅读)，但我们进行了一些测试，测试人员(有意无意地)在任何网页都无法显示的情况下应用了非常极端的缩放级别可用。然后他们声称这样做的可能性是一个错误，用户可能会在不知道他在做什么的情况下应用缩放，并且可能无法将其设置回来。我被要求完全禁用缩放，但我自己不太喜欢这个想法。

我不想简单地禁用缩放，而是希望能够在其下设置最小和最大边界，我已经验证，该网站看起来仍然足够好。如何完全禁用缩放的问题不是此问题的重复。

该网站建立在 React 框架之上。

我尝试将以下内容放入 CSS:

body {
  min-zoom: 0.75;
  max-zoom: 1.5;
}

或

  min-zoom: 75%;
  max-zoom: 150%;

这没有用，缩放比例可以从 25% 更改为 500%，这是我的设计无法管理​​的。其他属性如

body {
  margin: 200px;
}

在这个地方受到尊重，因此不会忽略标签或整个 css 文件。

我也试过添加

<meta name="viewport" content="width=device-width, 
   initial-scale=1.00, maximum-scale=1.5, minimum-scale=0.75">

我在 index.html 中的 head 标签，但似乎也被忽略了。

我也加了

@viewport {
  zoom: 1.00;
  min-zoom: 0.75;
  max-zoom: 1.5;
}

我的 css，浏览器不关心。

最佳答案

要确定允许用户代理(浏览器) 处理的最小 和最大 缩放边界，请使用 viewport 元标记并在那里设置您的边界，例如:

<meta name="viewport" content="width=device-width, initial-scale=1.00, maximum-scale=2.00, minimum-scale=1.00">

视口(viewport)中可识别的属性 <meta>元素是:

  • width : 设备虚拟视口(viewport)的宽度。
  • height : 设备“虚拟视口(viewport)”的高度。
  • device-width :设备屏幕的物理宽度。
  • device-height :设备屏幕的物理高度。
  • initial-scale :访问页面时的初始缩放。设置为 1.0不缩放。
  • minimum-scale :访问者可以在页面上缩放的最小量。设置为 1.0不缩放。
  • maximum-scale :访问者可以在页面上缩放的最大量。设置为 1.0不缩放。
  • user-scalable :允许设备放大和缩小。值为 yes或 no .

有关视口(viewport)元元素的官方信息可以在 CSS Device Adaptation 中找到草稿。

允许最小缩放 1.00和最大缩放 2.00在页面上，设置minimum-scale=1.00和 maximum-scale=2.00 :

<meta name="viewport" content="width=device-width, initial-scale=1.00, minimum-scale=1.00, maximum-scale=2.00">

要禁止页面上的任何缩放，请将比例设置为 1.00每个和 user-scalable=no :

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

虽然此功能在各种移动平台上都受支持，但不能 100% 保证您可以限制最小 和最大 边界。

还有 CSS 规则 @viewport 在CSS Device Adaptation , 但根据 caniuse.com 其支持率目前较低和 MDN .但是，当浏览器 vendor 根据草案实现该功能时，您将能够使用 min-zoom 确定样式表中的缩放边界。和 max-zoom属性，例如:

@viewport {
  zoom: 1.0;
  min-zoom: 1.0;
  max-zoom: 2.0;
}

作为旁注，如果您想使用 JavaScript 检测缩放级别，请查看 this post了解更多详情。

关于javascript - 有没有办法为浏览器指定最小和最大缩放级别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51667527/

小和javascriptcodestrongviewportcssreactjsbrowserzooming

有关javascript - 有没有办法为浏览器指定最小和最大缩放级别？的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  3. ruby - 难道Lua没有和Ruby的method_missing相媲美的东西吗？ - 2

    我好像记得Lua有类似Ruby的method_missing的东西。还是我记错了？ 最佳答案 表的metatable的__index和__newindex可以用于与Ruby的method_missing相同的效果。 关于ruby-难道Lua没有和Ruby的method_missing相媲美的东西吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/7732154/

  4. ruby-on-rails - rails 目前在重启后没有安装 - 2

    我有一个奇怪的问题:我在rvm上安装了ruby​​onrails。一切正常，我可以创建项目。但是在我输入“railsnew”时重新启动后，我有“程序'rails'当前未安装。”。SystemUbuntu12.04ruby-v"1.9.3p194"gemlistactionmailer(3.2.5)actionpack(3.2.5)activemodel(3.2.5)activerecord(3.2.5)activeresource(3.2.5)activesupport(3.2.5)arel(3.0.2)builder(3.0.0)bundler(1.1.4)coffee-rails(

  5. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  6. ruby-on-rails - 在 ruby​​ .gemspec 文件中，如何指定依赖项的多个版本？ - 2

    我正在尝试修改当前依赖于定义为activeresource的gem:s.add_dependency"activeresource","~>3.0"为了让gem与Rails4一起工作，我需要扩展依赖关系以与activeresource的版本3或4一起工作。我不想简单地添加以下内容，因为它可能会在以后引起问题:s.add_dependency"activeresource",">=3.0"有没有办法指定可接受版本的列表？~>3.0还是~>4.0？ 最佳答案 根据thedocumentation,如果你想要3到4之间的所有版本，你可以这

  7. ruby - 如果指定键的值在数组中相同，如何合并哈希 - 2

    我有一个这样的哈希数组:[{:foo=>2,:date=>Sat,01Sep2014},{:foo2=>2,:date=>Sat,02Sep2014},{:foo3=>3,:date=>Sat,01Sep2014},{:foo4=>4,:date=>Sat,03Sep2014},{:foo5=>5,:date=>Sat,02Sep2014}]如果:date相同，我想合并哈希值。我对上面数组的期望是:[{:foo=>2,:foo3=>3,:date=>Sat,01Sep2014},{:foo2=>2,:foo5=>5:date=>Sat,02Sep2014},{:foo4=>4,:dat

  8. ruby - 当使用::指定模块时，为什么 Ruby 不在更高范围内查找类？ - 2

    我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后，我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是，如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误，还是仅仅是Ruby解析变量名的方式的逻辑结果？ 最佳答案 Isthisabug,or

  9. 没有类的 Ruby 方法？ - 2

    大家好!我想知道Ruby中未使用语法ClassName.method_name调用的方法是如何工作的。我头脑中的一些是puts、print、gets、chomp。可以在不使用点运算符的情况下调用这些方法。为什么是这样？他们来自哪里？我怎样才能看到这些方法的完整列表？ 最佳答案 Kernel中的所有方法都可用于Object类的所有对象或从Object派生的任何类。您可以使用Kernel.instance_methods列出它们。 关于没有类的Ruby方法？，我们在StackOverflow

  10. ruby-on-rails - Rails 3，嵌套资源，没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

随机推荐