找回密码
 立即注册

QQ登录

只需一步,快速开始

胡萝卜

注册会员

3

主题

15

帖子

190

积分

注册会员

积分
190
最新发帖
胡萝卜
注册会员   /  发表于:2017-7-7 17:09  /   查看:3710  /  回复:9
本帖最后由 胡萝卜 于 2017-7-7 17:12 编辑

有时候,手机页面的大小在设计器里已经设计好了,不希望用户在浏览器里还可以缩放。如何实现呢?
做法其实比较简单,需要加一点JavaScript代码。
步骤:
1. 打开不需要被缩放的页面
2. 选择页面设置
3. 点击 编辑页面加载时命令...
4. 添加一个JavaScript命令
5. 在文本框中添加如下代码。
  1. var touchHandler = function (event) {
  2.     if (event.touches.length > 1) {
  3.         event.preventDefault()
  4.     }
  5. }
  6. window.addEventListener("touchstart", touchHandler, false);
复制代码

如下图



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

9 个回复

倒序浏览
Simon.hu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2017-7-7 17:30:34
沙发
回复 使用道具 举报
胡萝卜
注册会员   /  发表于:2017-7-7 17:49:33
板凳
如何所有的页面都应用不能被缩放的策略,可以把代码保存为一个.js文件,再上传到通过如下办法上传即可

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
新小林
中级会员   /  发表于:2017-7-16 13:54:29
地板
谢谢胡萝卜给我的解决方案。结合自己操作的经验有几点要对后来的人说下

1.代码被应用在首页以后,页面跳转到另一个页面,禁止缩放命令也可以被有效使用
2.在操作过程中可能会遇到这样的问题,使用手机点击某个文本框,然后页面会自己缩放到以文本框为中心的位置,同时由于这个命令导致无法重新复原回原始大小。这种情况下应注意,即文本框和页面其他文字的大小应该统一,才能避免造成页面自动缩放的可能。

给活字格官方的建议:
62天试用期实在太短了,主要原因如下:作为单纯网页设计并没有太大所谓,因为不需要联网,你们的网页模拟器做的很好,不需要发布直接按F5可以进行程序仿真。

但是!手机模拟器简直就是渣渣,完全模拟不了手机操作的情况,为何不可以开放连接客户手机的通道给客户进行设计时候的验证?今天刚好试用期到期,手机页面做了一半不到,已经进行不下去了,只能忍痛放弃做了一半的手机页面转战回网页端。哎……
回复 使用道具 举报
Simon.hu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2018-1-19 17:43:18
6#
这是一个非常好用的功能!
回复 使用道具 举报
504146555
金牌服务用户   /  发表于:2018-4-26 13:57:43
7#
强烈支持官方开放连接客户手机的通道给客户进行设计时候的验证和测试!
回复 使用道具 举报
504146555
金牌服务用户   /  发表于:2018-4-26 13:59:03
8#
服务器端刚开始安装的时候就试用,早已到期了,现在测手机端就头大了。
回复 使用道具 举报
Eric.Liang讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2018-4-26 16:11:24
9#
504146555 发表于 2018-4-26 13:59
服务器端刚开始安装的时候就试用,早已到期了,现在测手机端就头大了。

感谢反馈
回复 使用道具 举报
求知者
初级会员   /  发表于:2018-5-10 17:16:41
10#
$('head').append('<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />');可以使用这一句放在页面加载的时候
回复 使用道具 举报
Eric.Liang讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2018-5-10 18:07:19
11#
求知者 发表于 2018-5-10 17:16
$('head').append('');可以使用这一句放在页面加载的时候

回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部