相关疑难解决方法(0)

我想知道是否可以检测浏览器是否在iOS上运行,类似于使用Modernizr进行特征检测的方式(尽管这显然是设备检测而不是功能检测).

通常我更喜欢功能检测,但我需要找出一个设备是否是iOS,因为他们根据这个问题处理视频的方式YouTube API无法使用iPad/iPhone /非Flash设备

我有这个代码:

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

在iPhone上运行全屏网络应用程序.

从此列表中选择内容时,iPhone会放大select-element.并且在选择某些内容后不会缩小.

我怎么能阻止这个？或缩小？

这是困境,我有一个网页(仅适用于Android设备),在该页面中我有一个输入框(专门用于文本框),当它获得焦点时,浏览器会放大.我不希望它放大 - 声音容易,对吗？

这里是它变得有趣的地方:我必须能够放大一般,所以不要说

<meta name='viewport' content='user-scalable=0'>

这对我不起作用.

此外,输入框不会收到单击事件.当单击另一个按钮时,会出现以编程方式获得焦点.

这是我尝试过的,到目前为止它们已经失败了:

jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no" />');
jQuery("#locationLock input").focus();
jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes" />');

这也失败了:

<input type='text' onfocus="return false">

还有这个:

jQuery("#locationLock input").focus(function(e){e.preventDefault();});

有任何想法吗？

我似乎找不到解决这个问题的方法.

我有一个像这样的简单输入字段.

<div class="search">
   <input type="text" value="y u no work"/>
</div>?

而我正试着focus()在一个函数内部.所以在随机函数内部(无论它是什么函数)我有这条线...

$('.search').find('input').focus();

这对每个桌面都可以正常工作.

但它在我的iPhone上不起作用.该字段没有聚焦,键盘没有显示在我的iPhone上.

出于测试目的并向您展示问题,我做了一个快速示例:

$('#some-test-element').click(function() {
  $('.search').find('input').focus(); // works well on my iPhone - Keyboard slides in
});

setTimeout(function() {
  //alert('test'); //works
  $('.search').find('input').focus(); // doesn't work on my iPhone - works on Desktop
}, 5000);?

知道为什么focus()我的iPhone上的超时功能不起作用.

要查看实时示例,请在iPhone上测试此小提琴.http://jsfiddle.net/Hc4sT/

更新:

我创建了与我当前在当前项目中面临的完全相同的情况.

我有一个选择框应该 - 当"改变"时 - 将焦点设置到输入字段并滑入iphone或其他移动设备上的kexboard.我发现focus()设置正确但键盘没有出现.我需要键盘出现.

我在这里上传了测试文件http://cl.ly/1d210x1W3Y3W ...如果你在iphone上测试它,你可以看到键盘没有滑入.

代码:

<select>
    <option value="1">Home</option>
    <option value="2">About</option>
    <option value="3">Services</option>
    <option value="4">Contact</option>
</select>

当我触摸时select,iPhone会放大该元素(并且在取消选择后不会缩小).

我怎么能阻止这个？或缩小？我无法使用,user-scalable=no因为我实际上需要这个功能.这是iPhone,选择菜单.

我整天都在寻找解决方案,这个网站不断涌现,为什么不问你们.

我正在构建我们公司的移动网站,我们希望禁用自动缩放移动设备用于在他们关注时放大文本/搜索/电子邮件输入.我正在HTML5中构建网站,并看到/测试了 <meta name="viewport" content="width=device-width, user-scalable=no" /> 解决方案.具有各种属性(即最小比例= #,最大比例=#")这适用于我正在测试的几乎所有移动设备.只有一个问题.我希望用户能够放大/缩小他们的休闲.(我们有更高分辨率的产品拍摄,很高兴看到近距离拍摄)

如何在单击输入标签时禁用放大,同时保留完整的手动用户缩放控制？

ps该网站也使用jQuery.所以使用它的任何想法可能会有所帮

谢谢Jrak

我有一个使用jQuery提交搜索的Web表单.表单本身不会触发提交事件,因为我抓住并删除它(这是一个更大,更复杂的表单的所有部分,我正在使用渐进增强来添加此功能).

在iPhone上,浏览器一旦聚焦,就会自动放大我的搜索输入.在"输入"键盘事件中,搜索是通过javascript执行的,我模糊了输入,它消除了屏幕上的iPhone键盘,但浏览器仍然放大到输入区域.

有没有办法通过javascript以编程方式再次缩小回到初始视口区域？

编辑:搜索执行没有重定向,这通常会在新页面加载时重置视口 - 所有内容都发生在这里的一个页面上.

我正在使用Cordova编写聊天应用程序,聊天视图在页面底部有一个类似iMessage的输入字段.在iOS 7.0中,单击该字段会调整窗口大小并将输入字段放在键盘上方.在iOS 7.1中,单击输入字段只是从底部向上推动所有内容,并且不会调整窗口大小.

我的视口设置为:

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densitydpi=device-dpi" />

• 将输入相对于顶部定位时,不会发生调整大小.但是,将输入定位得足够低以与键盘顶部对齐会导致无调整大小错误.这可以通过构建离子磨砂玻璃演示和更改页脚来复制

  <footer class="bar bar-footer bar-frosted"><button class="button button-clear button-positive" ng-click="add()">Add Message</button></footer>

  至

  <footer class="bar bar-footer bar-frosted"><input name="testInput"></footer>

  在www/index.html中

这会复制iOS7.1中的错误,并在iOS 7.0.x中按预期工作.我已经按照这里的建议,但他们的线程已过时,并没有最终工作.提前感谢您的任何见解!

我有1页有2个DIV元素显示/隐藏基于用户点击操作按钮与javascript,我想切换操作按钮单击缩放.

我尝试使用下面的javascript,它正在改变viewport meta,但没有任何效果.

有什么建议？

var ViewPortAllowZoom = 'width=device-width;';

var ViewPortNoZoom = 'width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;';

  function AllowZoom(flag) {
            if (flag == true) {
                $('meta[name*=viewport]').attr('content', ViewPortAllowZoom);                
            }
            else {
                $('meta[name*=viewport]').attr('content', ViewPortNoZoom);
            }
        }

我在移动safari上使用textareas,当一个textarea聚焦时,视口似乎在文档下面添加了填充.在检查和选择区域时,它不会解析为元素,甚至是html节点.

textarea在屏幕上的位置或者它是否绝对位置似乎并不重要,填充在聚焦时始终存在.有时您需要向下滚动才能使其可见,但理想情况下,根本不可能使其可见.

我在下面添加了一个屏幕截图和代码示例.有一个100%宽度和高度的封面,用于显示文档的常规边界,而textarea绝对位于正文的底部.

不聚焦:

聚焦(箭头指向不需要的填充):

码:

<html>
  <head>
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <style>
      html{
        background-color: gray;
      }

      body{
        width: 100%;
        margin: 0px;
      }

      #cover{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: block;
        background-color: green;
      }

      #textarea{
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 100px;
        display: block;
        margin: 0px;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div id="cover">Cover</div>
    <textarea id="textarea"></textarea>
  </body>
</html>

我很感激人们的见解.谢谢.

我想在 Android Firefox（可能是 iOS Safari）上聚焦 HTML 输入字段时禁用自动缩放。

我在 SO [1,2,3] 和网络上阅读了许多相关的古老线程，但既没有找到可行的解决方案，也没有找到明确的答案，即这在 2021 年是不可能的。我唯一的测试设备是 Android手机（iOS 也可能出现这种情况），仅 Firefox 会出现此问题；Chrome 按我的预期工作。

我努力了：

• font-size: 16px输入字段上的设置
• 环境<meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1" />
• 甚至出于绝望<meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1, user-scalable=no">

安卓 11、火狐 93.1.0

难道我想要达到的目标真的不可能实现吗？

• 代码沙箱：https://y370s.csb.app/
• [1]在输入“文本”标签中禁用自动缩放 - iPhone 上的 Safari
• [2] Android网页中禁用输入焦点缩放
• [3]在 Android 智能手机中禁用输入焦点缩放

我有一些 JavaScript 代码，可以将预订小部件注入客户的网站。直到最近，一切都运行良好，但我猜测一些针对移动设备的 Chrome 更新导致了一个问题：

注入的代码只是一行引用 JavaScript 文件的 HTML，如下所示：

<script src='https://crown.addons.la/leads/new/forms/resize/expander.php' config='3'></script>

问题是，当我点击“发件人地址”时，Android 上的 Chrome 浏览器会放大 10 倍并跳转到右侧。这不会影响三星浏览器、Firefox、Brave 或任何其他浏览器，我什至为某些人提供了一些示例，但这些浏览器并没有被破坏。

这是在给出领域焦点之前：

这是我们给予它焦点的一次：

我遇到的问题是，我无法在手机上打开开发人员工具来修复它，并且该问题不会在 Browserstack 上重现，也不会在桌面版 Chrome 的响应模式下重现。 有没有什么方法可以在不需要启动并运行整个 Android 模拟器的情况下进行调试？

放大效果损坏的客户示例：

• https://www.crownlimousine.com/
• https://247ride.com/

注入代码的工作示例：

• https://acmedemo.addons.la/contact-form-demo/

我不确定是否有更好的地方可以问这个问题。我知道这对我自己来说非常具体，但不知道该去哪里寻找。

在Bootstrap 3中,流体网格似乎存在问题,导致水平滚动条出现在小型设备上.我的问题不同......

除非我单击文本输入,否则我没有获得任何滚动条.在iPhone上,可以自动缩放当前字段.这是好的(我猜),但离开该字段后,缩放不会被删除,因此内容被剪裁,并且有一个丑陋的水平滚动条.

有没有办法阻止变焦？或者也许告诉移动safari将缩放设置回原来的样子？