Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >有没有办法将视口的比例动态重置为1.0

有没有办法将视口的比例动态重置为1.0
EN

Stack Overflow用户
提问于 2012-01-30 15:42:50
回答 2查看 14.6K关注 0票数 14

我在一家移动网上商店工作,在实现产品缩放功能时卡住了

在点击图片“用户可缩放”并将最大比例设置为10.0之后,当用户使用收缩手势放大产品时,一切正常。但关闭缩放图像后,比例不会重置为1.0。

有没有办法动态重置视口的比例值。“初始尺度”似乎不起作用,将“最小尺度”和“最大尺度”重置为1.0也不起作用。

在iPhone / iPad上出现问题

似乎有一个解决方案,但我不知道我应该将这篇文章中的How to reset viewport scaling without full page refresh?应用于哪个元素

“您需要使用- webkit -transform: scale(1.1);webkit transition。”

但我不知道该样式应用于哪个元素。

这里有一些代码来说明这个问题。

在视口的meta标记中,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0" />

页面的其余部分如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="page">
    <img src="images/smallProductImage.jpg">
</div>

<div id="zoom">
    <div class="jsZoomImageContainer"></div>
</div>

这是javascript::

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
zoom:{
    img: null,
    initialScreen:null,

    load:function(src){             

        //load the image and show it when loaded

        showLoadingAnimation();
        this.img = new Image();
        this.img.src = src;

        jQuery(this.img).load(function(){
            zoom.show();
        });
    },

    show:function(){

        var screenWidth, screenHeight, imageWidth, imageHeight, scale, ctx;             

        hideLoadingAnimation();
        jQuery("#page").hide();         
        jQuery("#zoom").show();

        jQuery(".jsZoomImageContainer").empty();
        this.initialScreen =[jQuery(window).width(),  jQuery(window).height()]
        jQuery(".jsZoomImageContainer").append(this.img);               


        imageWidth = jQuery(this.img).width();
        imageHeight = jQuery(this.img).height();

        scale = this.initialScreen[0] / imageWidth ;

        jQuery(this.img).width(imageWidth * scale)
        jQuery(this.img).height(imageHeight * scale)


        jQuery(".jsZoomImageContainer").click(function(){
             zoom.hide();
        });

        jQuery('meta[name="viewport"]',"head").attr("content","user-scalable=yes, initial-scale:1.0, minimum-scale=1.0, maximum-scale=10.0")                 

    },

    hide:function(){                        
        jQuery(".jsZoomImageContainer").empty();                        
        jQuery('meta[name="viewport"]',"head").attr("content","user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0") 

        jQuery("#zoom").hide();
        jQuery("#page").show();

        this.img = null;
        this.initialScreen = null;

    }
}

jQuery("#page img").click(function(){
    zoom.load("images/bigProductImage.jpg");
});
EN

回答 2

Stack Overflow用户

发布于 2012-08-01 02:36:20

According to ppk,这种操作视口的技术可以在除火狐之外的所有现代浏览器上运行:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<meta id="testViewport" name="viewport" content="width = 380">
<script>
if (screen.width > 740) {
    var mvp = document.getElementById('testViewport');
    mvp.setAttribute('content','width=740');
}
</script>

关键似乎是在meta标记中设置一个id属性,这样您就可以使用JS轻松地选择它并替换content属性的值。

票数 1
EN

Stack Overflow用户

发布于 2014-03-10 01:00:49

它可以在所有现代浏览器中运行。我已经在一些网站上这样做了,所有的工作都很好。但是重置并不是解决问题的办法。当环境发生变化时,需要适当地更改缩放和视口宽度。当方向改变时,当屏幕尺寸改变时,你需要改变它,当然,当检测到屏幕尺寸时,你需要在加载时改变它。如果您获得当前宽度的值,则可以计算比例。(顺便说一下,当方向为90或-90时,您应该将高度作为宽度)。例如,如果您的主容器的宽度是960px,而w_width是您动态获取的当前宽度。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
scale=100/100/(960/w_width);
scale=scale.toFixed(2) ;
jQuery('meta[name=viewport]').attr('content', "width="+w_width+", initial-scale="+scale);
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9066499

复制
相关文章
C#在WINForm程序中通过三种方式创建XML文件
string path = System.AppDomain.CurrentDomain.SetupInformation.ApplicationBase;
zls365
2022/01/14
1.6K0
C#在WINForm程序中创建XML文件
string path = System.AppDomain.CurrentDomain.SetupInformation.ApplicationBase;
zls365
2021/02/26
2.4K0
C#通过XPath解析xml文件
xpath语法讲解:http://www.w3school.com.cn/xpath/xpath_syntax.asp
提莫队长
2019/02/21
1.5K0
Oracle通过指令创建用户
Oracle作为世界上使用最广泛的关系数据库,对于客户很多每天海量数据的公司是首要选择。我们公司在双十一期间,曾发生过每网点每天1G多的扫描数据量,全国有六千多个网点,每天每时不停读写数据库,而数据库仅仅是变慢了而没有崩溃。oracle强大,也有进不去的时候。或者需要对用户管理,此时可以参考如下方法。命令为官方,个人总结。(双斜杠后面为注释)
星哥玩云
2022/08/17
5760
oracle 创建用户命令
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/144275.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/31
1.1K0
【C#】创建、解析 xml 文件(XmlDocument 方式)
本文使用 System.Xml 中的 XmlDocument 解析 xml 格式的文件。另外,由于我是粗略的看了下官方文档和一些博客,可能会有许多错误的地方,望指出。
全栈程序员站长
2022/09/06
1.7K0
如何在Linux中创建文件?多个文件创建操作命令。
如果文件file1.txt不存在,则上面的命令将创建该文件,否则,它将更改其时间戳。
用户5005176
2021/08/10
39.1K0
【DB笔试面试511】如何在Oracle中写操作系统文件,如写日志?
可以利用UTL_FILE包,但是,在此之前,要注意设置好UTL_FILE_DIR初始化参数。
AiDBA宝典
2019/09/30
28.8K0
【DB笔试面试511】如何在Oracle中写操作系统文件,如写日志?
如何在PHP中解析XML
XML解析器是一个程序,它可以将XML文档或代码转换为XML文档对象模型(DOM)对象。
Lemon黄
2020/07/07
3.6K0
oracle命令创建新用户
Windows需要sqlplus命令框,获取CMD窗口下输入sqlplus(需要先安装成功oracle)
全栈程序员站长
2022/08/31
1.4K0
oracle命令创建新用户
git命令中带有特殊符号如@
使用带用户密码clone的方式: git clone https://username:password@remote 当username和password中含有特殊符号会导致出错, 因为为http的请求,所以需要将特殊符号encode成url格式的 java使用: String c = java.net.URLEncoder.encode(".","utf-8"); System.out.println(c); 源文档 <http://blog.csdn.net/qq1142003960/article/
千往
2018/01/24
2.1K0
Maven通过命令创建web项目
mvn archetype:create -DgroupId=com.learn -DartifactId=LearnNew -DarchetypeArtifactId=maven-archetype-webapp
程序新视界
2022/11/30
3180
Maven通过命令创建web项目
oracle解析xml
这个方法只适合clob比较短的xml,如果xml字段过大会报错需要用SUBSTR()函数来切割
overme
2022/01/17
1.5K0
oracle解析xml
OpenStack通过命令创建虚拟机
查看网络列表 [root@controller ~]# openstack network list ID Name Subnets 0419d666-2a1e-4c5f-9331-b54ab7718b8b public e97beba0-d8ae-4bc6-9497-abad9200cb60 36878f8d-9df4-4e8a-9972-4c236d9c9eca private 2e2086da-6acb-499e-a22e-a3906bcf48e7 查看虚拟机类型列表 [root@controlle
院长技术
2020/06/13
1.5K0
C# 反射 通过类名创建类实例
“反射”其实就是利用程序集的元数据信息。 反射可以有很多方法,编写程序时请先导入 System.Reflection 命名空间。
跟着阿笨一起玩NET
2018/09/19
3.5K0
如何在js中创建对象
七夕临近了,没有对象的来创建一个吧 使用对象字面量: const o = { name: "zehan", greeting() { return `Hi, 我是${this.name}`; } }; o.greeting(); // "Hi, zehan" 使用构造函数: function Person(name) { this.name = name; } Person.prototype.greeting = function () { return `Hi, 我是
ZEHAN
2020/09/23
7.6K0
如何在Mac中创建MiniKube
Minikube是一个工具,可以在本地轻松运行Kubernetes。 Minikube在笔记本电脑的VM中运行单节点Kubernetes集群,供希望尝试Kubernetes或日常开发的用户使用。
方志朋
2022/05/08
2.4K0
如何在Mac中创建MiniKube
如何在Dynamo中创建UI
本文介绍了如何在Dynamo中创建UI,通过使用WPF技术实现了窗口的创建和交互。首先介绍了IronPython和Dynamo的基础知识,然后讲解了实现原理和准备工作。最后通过具体的操作步骤和代码示例讲解了如何在Dynamo中创建UI。
企鹅号小编
2018/01/05
2.1K0
如何在Dynamo中创建UI
oracle创建数据库命令「建议收藏」
2. 创建表空间 CREATE TABLESPACE DATA DATAFILE ‘D:\oracle\DATA\DATA.ORA’ size 10G autoextend on next 1M Maxsize unlimited logging extent management local segment space management auto; 3.创建临时空间 CREATE TEMPORARY TABLESPACE DATA_TEMP TEMPFILE ‘D:\oracle\DATA\DATA_TEMP.ORA’ size 1G EXTENT MANAGEMENT LOCAL UNIFORM SIZE 5M; 4.创建用户并授权 CREATE USER ceshi IDENTIFIED BY ceshi DEFAULT TABLESPACE DATA TEMPORARY TABLESPACE DATA_TEMP; ALTER USER ceshi ACCOUNT UNLOCK; GRANT DBA TO ceshi; GRANT CONNECT TO ceshi; grant create any sequence to ceshi; grant drop any sequence to ceshi; grant select any sequence to ceshi; 5.用户解锁 及修改密码 conn /as sysdba; alter user ceshi account unlock; alter user ceshi identified by password;
全栈程序员站长
2022/11/09
3.4K0
oracle创建数据库命令「建议收藏」
C# XML操作
1.XML帮助类 using System; using System.Collections.Generic; using System.Text; using System.Xml; using System.Data.SqlClient; using System.Data; using System.IO; using System.Xml.Serialization; namespace AutoO2O.Common { public class XmlHelper : XmlDocum
用户1055830
2018/01/18
1K0
C# XML操作

相似问题

如何在oracle中创建xml

14

如何在Oracle中通过xmltype解析XML

11

如何通过c# (如<Mode Name=“文本”>)读取XML

28

如何在MySQL查询中使用oracle命令如"break on“

32

使用c#和oracle创建xml文件

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文