相关疑难解决方法(0)
禁用视口缩放iOS 10+ safari？
我已经更新我的iPhone 6加至10的iOS beta版本,只是发现,在移动Safari浏览器,您可以通过双击放大任何网页或捏忽略了user-scalable=no在meta标签代码.我不知道这是一个错误或功能.如果它被视为一项功能,我们如何禁用视口缩放iOS 10 Safari？
在iOS 11/12发布,iOS 11和iOS 12 safari上更新仍然不尊重user-scalable=no元标记.
推荐指数
解决办法
查看次数
消除移动Safari中点击事件的300毫秒延迟
我已经读过,从点击链接/按钮到事件触发的时间,移动Safari的点击事件有300毫秒的延迟.延迟的原因是等待用户是否打算双击,但从UX角度来看,等待300毫秒通常是不合需要的.
消除这300ms延迟的一个解决方案是使用jQuery Mobile"tap"处理.不幸的是,我不熟悉这个框架,如果我需要的是一行或两行代码touchend以正确的方式应用,我不想加载一些大框架.
像许多网站一样,我的网站有很多点击事件,如下所示:
$("button.submitBtn").on('click', function (e) {
$.ajaxSubmit({... //ajax form submisssion
});
$("a.ajax").on('click', function (e) {
$.ajax({... //ajax page loading
});
$("button.modal").on('click', function (e) {
//show/hide modal dialog
});
我想做的是使用如下单个代码片段来消除所有这些点击事件的300毫秒延迟:
$("a, button").on('tap', function (e) {
$(this).trigger('click');
e.preventDefault();
});
这是一个坏/好主意吗？
推荐指数
解决办法
查看次数
检测夹点的最简单方法
这是一个WEB APP而不是本机应用程序.请不要使用Objective-C NS命令.
所以我需要在iOS上检测"捏"事件.问题是我看到的用于做手势或多点触摸事件的每个插件或方法,(通常)使用jQuery,并且是针对太阳下每个手势的完整附加插件.我的应用程序非常庞大,我对代码中的枯木非常敏感.我所需要的只是检测一个捏,使用像jGesture这样的东西只是为了我的简单需求而膨胀.
另外,我对如何手动检测夹点的理解有限.我可以得到两个手指的位置,似乎无法正确地检测到这一点.有没有人有一个简单的片段,只能检测到捏？
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何禁用Android上的网页缩放/缩放？
我编写了一个小型Web应用程序来收集一些数据并将其存储在中央数据库中.我走来走去,阅读价值观并在我的Android智能手机上输入网站.这只适合我,因此这次没有适用的公共可用性问题.
现在我想添加一个按钮来增加一个读数,我需要能够多次按下该按钮.但是,如果我执行得太快,浏览器会识别双标签并缩放/缩放到页面中.
我已经添加了一个视口标题,并且可以使用我在网络上找到的每个值组合.但页面仍然可扩展.我怎么能阻止它？
这是一个对我来说失败的最小测试页面:
<!doctype html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<style type="text/css">
body
{
font: 16pt sans-serif;
}
</style>
</head>
<body>
This is a test page. It should not be scalable by the user at all. Not with the two-pinger pinch gesture and even less with a double-tap on the text.
</body>
</html>
添加initial-scale = 1,maximum-scale = 1和各种target-whateveritwas-dpi不会改变事物.我已重新启动浏览器(Dolphin HD和股票浏览器)并已清除缓存.我在Android 2.2上,手机是HTC Desire.
推荐指数
解决办法
查看次数
Android浏览器忽略响应式网页设计
我刚开始转换我的网站有'响应式网页设计'.我安装了Firefox的"Web Developer"插件(http://chrispederick.com/work/web-developer/)来检查它是否正常工作.一切都很好看.
现在我用我的Android手机尝试了这个.我在纵向模式下无法正常工作......我在手机上跟踪了@ media-selectors处理错误的问题:
此页面(https://worldtalk.de/m/test.php)生成一个CSS,输出浏览器使用的高度/宽度和设备高度/宽度+方向作为参数.
我得到了以下结果:
- 肖像,800x1200
- 风景,800x400
方向是正确的,两个方向的宽度/高度和设备宽度/高度相同.但该设备(HTC Desire Z)仅使用错误的屏幕分辨率(800x1200)进行纵向模式.我想避免使用带有用户代理的设备数据库或类似的东西.
附加信息:
- 浏览器版本:WebKit/533.1
- Android 2.3.3/Sense 2.1
- HTC Desire Z(T-Mobile固件)
- JavaScript报告相同的屏幕分辨率
问题:
- 这只是我的手机型号还是Android浏览器的一般行为？
- 如何解决这个问题？
推荐指数
解决办法
查看次数
如何在响应式设计中禁用缩放功能？
如何在使用iPad,iPhone和/或其他智能手机时禁用响应式设计页面中的放大和缩小功能.
有没有办法控制它？
推荐指数
解决办法
查看次数
div宽度100%无法在移动浏览器中使用
我想做的事情,我认为非常简单.我正在构建的网站的标题是一种纯色,需要跨越屏幕的整个宽度,无论它被浏览的是哪个浏览器.到目前为止,我创建的内容在台式机和笔记本电脑上都很棒,但是当我测试它时平板电脑或手机,标题不会一直向右.标题内的内容确实跨越了一切,这对我来说真的很困惑.我可以让标题栏跨越整个宽度的唯一方法是将position属性设置为static,这不是我对此站点所需要的,所以这对我没有任何帮助.下面是我正在使用的CSS和HTML.有人可以看看它,让我知道我错过了什么.
HTML:
<div class="header">
<div class="container">
<div class="header-content">
....Some Content goes in here....
</div> <!-- /.header-container -->
</div> <!-- /.container -->
</div> <!-- /.header -->
CSS:
html, body {
background-color: #949494;
width: 100%;
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
min-width: 100%;
height: 200px;
background-color: #ffffff;
padding-top: 8px;
}
.container {
width: 1200px;
margin: 0 auto;
text-align: center;
}
推荐指数
解决办法
查看次数
HTML/CSS - 移动设备在开始时缩放
遇到问题,所有移动设备在开始时都会缩放50%.这是iPad以外的所有设备.试图做一个PHP检查,如果除了iPad之外的其他所有比例,可以扩展50%但是当你从横向移动 - >肖像 - >风景时,它将再次缩小50%.
这是我目前的元标记:
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=640, height=700, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
我的HTML在px中不使用任何宽度100%.总体而言,内容不会延伸640宽度和700高度.
有谁知道我怎么可能避免这个问题？
编辑
得出的结论是@hakre对像素的比例是正确的.我的修复是将每个宽度设置为%而不是px.这样它无论如何都会自动调整大小.需要注意的一点是我删除了比例.原因是它似乎搞砸了某些设备上的布局.再次感谢@hakre
推荐指数
解决办法
查看次数
使用 javascript 禁用镀铬缩放
有没有办法用javascript禁用镀铬缩放。我不想更改 chrome://flags 中的任何内容，我想禁用 chrome 的默认缩放和滑动到上一页行为，而是想编写自己的平移/缩放代码。我能够处理所有这些事件，但调用 'preventDefault' 无济于事。处理鼠标滚轮、ctrl+ 和 ctrl- 事件以及在那里调用 'preventDefault' 也无济于事。
最后，我想要使用 2 根手指自定义多点触控缩放，以及 chrome 和 IE 11 的平移功能。IE 平移对我来说非常适合，但缩放不行。
下面的示例脚本：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<script type="text/javascript" src="Scripts/jquery-3.1.0.js" ></script>
<script type="text/javascript" >
document.addEventListener('touchstart', function(event){
event.preventDefault();
});
document.addEventListener('touchend', function(event){
event.preventDefault();
});
document.addEventListener('touchmove', function(event){
event.preventDefault();
});
$('*').bind('touchmove', false);
</script>
<body>
<h1 align="center">
TEST STRING FOR PINCH ZOOM
</h1>
</body>
</html>
推荐指数
解决办法
查看次数
使触摸设备上的缩放行为更像在桌面上
我目前遇到了一个问题，我正在处理的网站与移动设备的放大方式无法很好地配合。
基本上，该网站上有一条水平全宽线，该线是固定的并垂直居中，并且在背景中是一个长文本。页面会自动滚动，水平线告诉用户现在哪个文本行是重要的。（页面会自动滚动，以便重要的文本行位于屏幕中央。）
但是当我使用 Firefox 放大我的 Android 手机时，这条线不再在屏幕上居中。甚至可以放大到线条根本不在屏幕上的程度。即使在这种情况下，页面仍会自动滚动，并且我确定重要文本仍在该水平线下方，但是当它在屏幕上不再可见时就没有用了。
在普通台式计算机上不存在此问题。如果您放大水平线，则它保持在屏幕中央的固定位置。
现在我想知道，是否可以在不破坏我在触摸设备上的网站的情况下修改缩放行为？
我知道我可以禁用所有缩放功能，但我不只是想取消该功能。更改字体大小而不是缩放也不起作用，因为这样站点将不再滚动到正确的位置。
编辑：禁用缩放不是一个选项，即使它只是在触摸设备上禁用。所以这个问题没有帮助。
Edit2：这是我的代码的一个非常简化的版本：
$(function() {
var textEl = $('#text');
var $w = $(window);
var percentPos = 0.000;
setInterval(function() {
var currentPosX = window.scrollX || window.pageXOffset;
var newPosY = textEl.offset().top-$w.height()/2+percentPos*textEl.height();
window.scrollTo(currentPosX, newPosY);
percentPos += 0.001;
if (percentPos >= 1)
percentPos = 0.000;
}, 100);
})#line {
position: fixed;
background-color: #ffef011f;
height: 5px;
top: 50%;
width: 100%;
}
#container {
text-align: center;
margin-top: 500px;
margin-bottom: 500px;
}
#text {
color: …推荐指数
解决办法
查看次数
为什么我的 CSS 在移动设备上看起来与在狭窄的桌面浏览器上不同？如何更改它？
窄桌面浏览器上的登录屏幕：
移动设备上的登录屏幕：
两侧具有相同的宽度和高度以及完全相同的 CSS 代码。
为什么它看起来不一样？我该如何改变它？
如果我尝试使用
@media screen and (max-width: 520px){ ... }
更改 div 的宽度，它在移动设备上看起来更好，但在桌面设备上看起来不同且更差。
推荐指数
解决办法
查看次数
在App Inventor中禁用webview缩放
当我使用App Inventor创建应用程序并添加webviewer组件时,它会显示一个令人讨厌的缩放图标.不知道如何禁用此图标.
如果App Inventor中没有实现特定功能,请告诉我我必须修改哪部分java代码.谢谢
推荐指数
解决办法
查看次数