jquerymobile的页面具有不同的元视口设置

本文介绍了jquerymobile的页面具有不同的元视口设置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我尝试在jQM beforepageshow上调整meta viewport标记，以致根本无法正常工作，我想这很明显.我的页面上面有一个高图图表，并且我的视口标记中通常不需要width=device-width, initial-scale=1,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0

I've tried adjusting my meta viewport tag on a jQM beforepageshow etc it simply doesn't work and I guess that's pretty obvious why. I have one page with a highcharts chart on it and I need to have nothing inside my viewport tag which normally has width=device-width, initial-scale=1,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0

那是因为我希望当大块图表进入时应用程序能够缩小，是否有人对如何设置具有不同viewport设置的页面有任何绝妙的主意?我可以不用AJAX链接到它，然后有条件地输出正确的meta标签，但我不愿意这样做.

and that's because I want the app to zoom out when the chunky chart goes in, has anyone had any brilliant ideas on how to have one page with different viewport settings? I could link to it without AJAX and then output the right meta tag conditionally but I'd rather not do this.

推荐答案

当我想启用图像缩放或需要用户查看的其他内容时，我在几个移动网站上动态更改了viewport标记小写:

I dynamically changed the meta viewport tag on a couple of my mobile websites when I want to enable zooming for an image or something else that requires the user looking at small text:

var $viewport = $('meta[name="viewport"]'), default_viewport = $viewport.attr('content'); $(document).delegate('#page-id-one, #page-id-two', 'pageshow', function () { //these are the pages that you want to enable zooming $viewport.attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=5.0'); }).delegate('#page-id-one, #page-id-two', 'pagehide', function () { $viewport.attr('content', default_viewport); });

此代码预计将包含在jQuery和meta viewport标记之后.显然，您可以根据需要更改viewport元素的内容(我相信Safari允许10的maximum-scale.)

This code expects to be included after jQuery and the meta viewport tag. You can obviously change the contents of the viewport element as you see fit (I believe that Safari will allow a maximum-scale of 10).