- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
缩放有两种类型。您在移动浏览器上获得的“捏合缩放”,其中内容从屏幕边缘消失。以及您在桌面浏览器上获得的“页面缩放”,就像您执行 Ctrl + 时一样。在“页面缩放”之后,页面会重新流动,因此使用响应式布局,您仍然可以看到整个页面宽度。
如何允许用户在移动设备上“页面缩放”?
我想我网站的标题栏上可能有一个 Zoom + 和 Zoom - 按钮。我想要这个是因为我有一个大多数用户喜欢的网络应用程序,无论是在桌面浏览器还是移动浏览器上。但是一些能力较差的用户发现该网站在他们的某些移动设备上很小而且很笨拙。双指缩放功能(我没有禁用)很有帮助,但这意味着要不断放大和缩小以进行导航。
我尝试过涉及 CSS 的解决方案 transform: scale(...)
和 HTML <meta name="viewport" ...>
并从 JavaScript 改变这些。但是这些似乎都具有“捏缩放”效果,而不是我所追求的页面缩放。 transform: scale(...) 也会导致基于 js/pixelbased 的交互类型出现问题,例如我使用的 draggable。
我还研究过从 JavaScript 更改 CSS 字体大小。但这只适用于文本,不适用于图像,<div>
等..
最佳答案
很抱歉回答我自己的问题,但经过大量修改后,我找到了一种适合我的方法并且似乎适用于大多数网站,所以我认为它值得分享:
function zoom(scale) {
document.body.style.transform = "scale(" + scale + ")";
document.body.style.transformOrigin = "top left";
document.body.style.width = (100 / scale) + "%";
document.body.style.height = (100 / scale) + "%";
};
zoom(1.25);
诀窍是通过缩放变换放大主体,然后减小高度和宽度。减小高度和宽度会导致它重新流动并将转换后的内容保留在屏幕上。
我通过将上面的代码粘贴到几个流行网站上的 Chrome Firefox 和 IE 的控制台来测试它。它似乎完美地重新扩展了 amazon.com 和 stackoverflow.com,但不是 gmail。我自己的网络应用需要下面描述的补丁。
带有 jQuery 补丁的更完整的解决方案:
使用上述解决方案(以及缩放后),当 JavaScript 尝试测量像素位置并使用它们定位其他元素时会出现问题。这是因为像 getBoundingClientRect()
这样的函数返回乘以 scale
的坐标。如果您使用 jQuery .height()
、.width()
、offset()
等,您会遇到同样的问题;所有 jQuery 文档都说,“当用户缩放页面时,尺寸可能不正确”。
您可以修复像 .width()
这样的 jQuery 方法,以便传递值,就像使用 scale = 1
查看它时的值一样。
从 jQuery 3.2.0 开始编辑:height()、width() 等已得到修复,不需要下面显示的补丁。但是 offset() 仍然需要补丁,如果您使用 $(window).height() 或 width() 来查找视口(viewport)的大小,您将需要按比例划分。
var zoom = (function () {
var scale = 1, recurLev = 0;
function alter(fn, adj) {
var original = $.fn[fn];
$.fn[fn] = function () {
var result;
recurLev += 1;
try {
result = original.apply(this, arguments);
} finally {
recurLev -= 1;
}
if (arguments.length === 0 && recurLev === 0) {
result = adj(result);
}
return result;
};
}
function scalePos(n) { return n / scale; }
/* Not needed since jQuery 3.2.0
alter("width", scalePos);
alter("height", scalePos);
alter("outerWidth", scalePos);
alter("outerHeight", scalePos);
alter("innerWidth", scalePos);
alter("innerHeight", scalePos);
*/
alter("offset", function (o) { o.top /= scale; o.left /= scale; return o; });
return function (s) {
scale = s;
document.body.style.transform = "scale(" + scale + ")";
document.body.style.transformOrigin = "top left";
document.body.style.width = (100 / scale) + "%";
document.body.style.height = (100 / scale) + "%";
};
}());
zoom(1.25);
我发现的唯一其他问题是代码(如拖动和绘图等)使用来自 mousedown
、touchstart
、mousemove
等事件的位置>、touchmove
等。我发现您必须通过将 pageX
和 pageY
除以 scale
来缩放它们。
关于javascript - 手机浏览器怎么显示 'page zoom',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40130969/
我是 PHP 新手。我在 WordPress 中遇到了这种语法.该代码的最后一行是做什么的? $page = $_SERVER['REQUEST_URI']; $page = str_replace(
为了清楚起见 - 这是我在这个问题中谈论的盒子的图片: 背景:我为客户构建了一个相对复杂的 WP 网站,它更像是一个 CMS 而不是博客,并且依赖于正在构建的页面层次结构。 (嗯,它们实际上是设置了
GitHub Help显示了 GitHub Pages 的以下选项: gh-pages 分行 主分支 master 分支/docs 文件夹 那么我们可以使用名称不是 master 或 gh-pages
我正在使用 AngularJS 框架为我的前端开发一个 Web 应用程序。对于我的登录页面,我必须阻止用户浏览除登录页面和注册之外的其他页面。但是我现在所做的代码也阻止用户导航到注册页面。以下是我的代
如果不将/1 粘贴到 url 上,是否可以改变 Zend_Paginator 来处理 URL?当前用户转到/aaron/studio。然后用户应该点击页面并开始访问 URL,例如:/aaron/stu
目前,我创建了一个可以生成PDF的系统。 PDF 中的数据来自 MySQL 数据库。现在,我像这样显示数据 第一页:仅显示一条数据。 第二页文字:将显示数据(每页最多 3 个数据) 说得更清楚一点,比
我正在尝试构建我的 ASP.NET MVC 4.5 项目以使用搜索引擎友好的 URL。我正在使用以下路由映射。 routes.MapRoute( name: "Default", ur
我为打印按钮使用了以下代码: Data.str = null; //Data.str = textBox24.Text.ToString(); string s = "select * from te
我们有一个带有两个 View 的单页应用程序(本质上是一个项目列表和所选项目的详细信息页面)。两个 View 都在单独的 html 文件中,我们使用 sammy.js 在页面之间进行转换/导航。在我们
(如果有人需要更多信息或更好的描述,请告诉我) 您好,我从这里添加了 viewPagerLibrary:http://viewpagerindicator.com/#introduction今天在我的
我是网页的新手,刚刚开始学习它。在创建新的 Razor 网站后,当我点击添加新项目时,我会看到可以添加的项目的多个选项。它们是: Layout Page(Razor) 这些类似于Master Page
我正在尝试使用 activeadmin 和 awesome_nested_set 创建页面模型。我一直在试图弄清楚如何使用正确的尾随 slug(例如/page1/page1subpage/a-subp
我正在尝试将 DotNetOpenAuth 与 Razor/MVC3 一起使用。大多数 DotNetOpenAuth HTML 助手都接受 System.Web.UI.Page 作为参数之一,使用 W
在我们的应用程序中,当我们在某些页面之间导航时,我们会在进入下一页之前发出服务器请求。发生这种情况时,当前页面上会显示加载图形。奇怪的是,在等待服务器响应完成时,下一页的样式会应用到当前页面。这会导致
我正在使用 ASP.NET Core 3.1 MVC 和 Razor 页面构建 Web 应用程序。 我是 Razor 页面的新手。 我使用上面的方法创建了一个基本应用程序。我想在应用程序启动时加载登录
我遇到了一个我似乎无法解释的问题。我在 Umbraco 中设置了一个主模板和 2 个子模板,但出现以下错误: Content controls have to be top-level control
我正在创建一个网络应用程序,允许用户选择他们当前的部门、他们将临时借调到哪个部门、他们正在执行的任务以及在任务上花费的时间。我需要写一些声明,根据他们当前部门的选择来确定他们所在的团队(当前的或新的)
当我导航到一个页面时,我得到了404错误页面,该页面说,在我刷新浏览器之前,没有包含此URL的页面,然后该页面才会显示。。我尝试使用@REACH/ROUTER来导航,而不是使用REACT-ROUTER
我正在使用 Html2Pdf 将一些 HTML 文件转换为 PDF。我还需要添加分页符来划分文档的各个部分。为此,我使用 标签。 我有以下 HTML 片段: ...
我正在使用另一个静态网站生成器,我希望能够将源文件(以markdown格式)以及生成的网站 checkin 到我的username.github.com存储库中。因此,很像Jekyll,但我没有使用J
我是一名优秀的程序员,十分优秀!