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

复制
相关文章
WordPress 技巧:给用户增加额外的联系字段
下面代码是新增新浪微博,腾讯微博,iMessage 三种联系方式,你也可以修改或者增加你自己需要的字段。把下面的代码贴到当前主题的 functions.php 文件,保存之后就可以在后台 > 用户 > 我的个人资料中的联系信息中见到效果。
Denis
2023/04/15
7350
【MYSQL包含逗号的字段拆分查询】
案例: SELECT DISTINCT tpi.`standard_catalog_code`, tpi.`groups` groups FROM plan_info tpi WHE
用户5640963
2019/07/25
7.7K0
【MYSQL包含逗号的字段拆分查询】
PHP过滤表单字段
从post来的进行addslashes后就可存入数据库了,取出后直接echo即可 普通的文本: 1.htmlspecialchars接着addslashes存入数据库,取出后直接echo即可。 2.addslashes存入数据库,取出后htmlspecialchars输出。 说明: addslashes仅仅是为了让原来的字符正确地进入数据库。 htmlspecialchars是吧html标签转化掉。
黄啊码
2020/05/29
3.1K0
CA1720:标识符不应包含类型名称
参数和成员的名称更好地用于传达其含义而不是描述其类型,类型描述通常由开发工具提供。 对于成员的名称,如果必须使用数据类型名称,请使用与语言无关的名称,而不要使用语言特定的名称。 例如,请使用与语言无关的数据类型名称 Int32,而不要使用 C# 类型名称 int。
呆呆
2022/02/19
4870
antd表单设置数组字段
在使用React+ant design进行开发时通常使用Form组件,但是很多时候我们某一个字段是二维数组。例如这样:
用户6256742
2022/07/17
2.4K0
antd表单设置数组字段
nginx配置Symfony
server { listen 80; server_name blog.phpfs.com; root /data/web; rewrite ^/a
苦咖啡
2018/04/28
1.7K0
Symfony是什么
众所周知前面有说到PHP的七大框架,接下来就来说说Symfony框架,希望说的对大家有所帮助。
叫我可儿呀
2019/11/26
2.1K0
Symfony是什么
撸个 symfony4(二)
目标其实是完成如下的需求,如果有想看源码的,可以看下sf官网出的一个demo。
仇诺伊
2020/04/24
2.4K0
撸个 symfony4(二)
CA1707:标识符不应包含下划线
按照约定,标识符名称不包含下划线 (_) 字符。 该规则将检查命名空间、类型、成员和参数。
呆呆
2022/02/18
4910
mediumtext java_加快此查询(加入mediumtext字段)「建议收藏」
SELECT t.name,t.userid,t.date,t.cat_id,t.forum_id,t.reply,t.hidden,t.moderated,t.sticky,t.statut,t.poll,t.helpful,t.del, t_data.message, user.name AS author_name,user.level AS author_level,user.is_globalMod AS author_global,user.award, user.statut AS author_statut,user.posts AS user_posts,user.point AS user_points,user.title AS user_title, user.image AS user_avatar,user.sex AS user_sex,user.other_level,user.hid_posts FROM frm_thread AS t LEFT JOIN frm_thread_data AS t_data ON t_data.thread_id = t.id LEFT JOIN frm_member AS user ON user.id =t.userid WHERE t.id = 248925
全栈程序员站长
2022/06/30
5180
全网最硬核 JVM TLAB 分析(单篇版不包含额外加菜)
本期内容比较硬核,非常全面,涉及到了设计思想到实现原理以及源码,并且还给出了相应的日志以及监控方式,如果有不清楚或者有疑问的地方,欢迎留言。
干货满满张哈希
2021/04/12
1.1K0
全网最硬核 JVM TLAB 分析(单篇版不包含额外加菜)
【HTML】HTML 表单 ③ ( label 标签 | 增大表单触发面积 | label 标签包含表单 | 通过 label 标签的 for 属性控制触发表单 )
label 标签 不属于表单 , 但是 经常与 表单 input 标签 一起使用 ;
韩曙亮
2023/03/30
3.7K0
【HTML】HTML 表单 ③ ( label 标签 | 增大表单触发面积 | label 标签包含表单 | 通过 label 标签的 for 属性控制触发表单 )
mysql 字段包含某个字符的函数
 通过sql查询语句,查询某个字段中包含特定字符串: 例子:查询e_book表的types字段包含字符串"3",有下面4种方式 select * from e_book where types like "%3%"; select * from e_book where find_in_set('3', types); select * from e_book where locate('3', types); select * from e_book where INSTR(types,'3');
凯哥Java
2019/06/28
6K0
mysql 字段包含某个字符的函数
Stop-Service WinDefend -ErrorAction SilentlyContinue报错此脚本包含恶意内容
关闭defender有风险,关闭defender后出问题概不负责。并不是说不关闭defender就没事了,自己使用习惯的话,即便defender开着也可能中招被黑客入侵。
Windows技术交流
2023/05/31
1K0
WCF运行错误:“此集合已经包含方案 http 的地址”的解决办法
修改web.config,在<system.serviceModel>下增加以下节(如果已经有serviceHostingEnvironment节点,则参照修改): <serviceHostingEnvironment aspNetCompatibilityEnabled="true" > <baseAddressPrefixFilters>         <add prefix="http://www.yourdomain.com"/>     </baseAddressPrefixFilters> <
菩提树下的杨过
2018/01/24
9060
Symfony 服务容器入门
本文是依赖注入(Depeendency Injection)系列教程的第 3 篇文章,本系列教程主要讲解如何使用 PHP 实现一个轻量级服务容器,教程包括:
柳公子
2018/09/17
3.4K0
提交表单时input字段非空验证
需求,当提交表单的时候,如果要验证的字段为空,则弹出提示框提示请完善表单信息,并且 return;不执行下一步。
王小婷
2019/08/07
3K0
全网最硬核 JVM TLAB 分析(单篇版不包含额外加菜)
本期内容比较硬核,非常全面,涉及到了设计思想到实现原理以及源码,并且还给出了相应的日志以及监控方式,如果有不清楚或者有疑问的地方,欢迎留言。
干货满满张哈希
2021/04/12
4280
全网最硬核 JVM TLAB 分析(单篇版不包含额外加菜)
[MySQL] INFORMATION_SCHEMA 数据库包含所有表的字段
sql注入后可以通过该数据库获取所有表的字段信息 1. COLLATIONS表 提供有关每个字符集的排序规则的信息。 COLLATIONS表包含以下列: COLLATION_NAME 排序规则名称。 CHARACTER_SET_NAME 与排序规则关联的字符集的名称。 ID 排序规则ID。 IS_DEFAULT 排序规则是否为其字符集的默认值。 IS_COMPILED 字符集是否已编译到服务器中。 SORTLEN 这与对字符集中表示的字符串进行排序所需的内存量有关。
唯一Chat
2019/09/10
1.2K0
点击加载更多

相似问题

Symfony 2此表单不应包含额外的字段

50

Symfony2.4窗体“此表单不应包含额外字段”错误

50

表单不应包含额外的字段Symfony 4

10

Symfony 2表单错误“此表单不应包含额外字段。提交表格时

13

Symfony2“此表单不应包含额外字段”与集合和动态字段的错误

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

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