相关疑难解决方法(0)

使用jquery确定屏幕宽度

无法让这个脚本在iphone上正常运行6.不断上升为"不可移动".我错过了什么?

$(document).ready(function(){
    if ($(window).width < 700){
        alert("mobile");
    }
    else {
        alert("not mobile");
    }
});
Run Code Online (Sandbox Code Playgroud)

编辑:道歉,我在这里输入的代码有一个错字,但不是我的问题的原因.我对iphone分辨率有不准确的信息.感谢大家!

javascript mobile jquery width

11
推荐指数
2
解决办法
3万
查看次数

检测平板电脑的最佳方法是什么?

我正在寻找检测平板电脑的完美方法.使用媒体查询,您可以为特定CSS设置最小和最大宽度.但有些平板电脑的分辨率高于soms桌面显示器.这样会产生冲突.

使用Javascript(Modernizr,Detectivizr)可识别平板电脑并在HTML中使用HTML标签上的"平板电脑"类设置此平板电脑.但是......并非所有用户都启用了Javascript.

所以你想要的是(在我看来)使用CSS来检测平板电脑.有谁知道这个的完美解决方案?

Thanx提前!

html css desktop tablet

9
推荐指数
1
解决办法
1万
查看次数

删除移动用户的html5视频背景的最佳方法是什么?

解释:我的一位客户希望在他的响应式网站上运行背景视频.不过,他还希望将其移除给平板电脑/移动用户.我知道这可以通过媒体查询完成,但视频仍然会作为DOM的一部分加载,这就是我想要阻止的.

问题:

  1. 在以特定宽度加载视口时,可以使用DOM中的JavaScript/jQuery删除视频元素吗?

  2. 如果手动增加视口是否可以恢复相同的视频?(我怀疑这是一个糟糕的方法)

  3. 视频会显示"display:none;" 仍会影响平板电脑/手机的加载/电池续航时间?

谢谢你的帮助.

javascript html5 html5-video media-queries responsive-design

9
推荐指数
1
解决办法
1万
查看次数

防止将图像下载到移动网站上的页面

我怎样才能在我的网站的移动版本中将图像从Web服务器上下载,因为这些是不需要和不使用的大文件,因此严重影响了网站的移动版本的使用.看过这种性质的先前线程后,我看到使用下面的代码隐藏图像的父级可以受益.

.parent {display:block;}
.background {background-image:url(myimage.png);}

@media only screen and (max-width:480px) {
.parent {display:none;}
}
Run Code Online (Sandbox Code Playgroud)

问题是我不想将背景图像CSS用于与它们相关的SEO问题,因为我喜欢使用Schema标记等.所以如何防止IMG标记被下载,如display:none; 只隐藏图像而不是停止下载.

注意:这不是针对版权保护问题,例如防止右键单击等,而是针对移动的下载内容的速度和最终大小.

html css performance mobile

8
推荐指数
1
解决办法
6328
查看次数

在Javascript中检测特定的iPhone/iPod touch型号

我正在为Apple i*设备开发一个网站,该网站使用HTML5 webkit功能,例如转换,但我想禁用iPhone <3GS和iPod touch <3rd Gen等较旧/较慢的iPhone型号的一些奇特的东西,因为在这些设备上的转换是太慢了.

有没有办法在Javascript中检测确切的模型(不仅仅是操作系统/用户代理)?

javascript iphone html5 ipod-touch

7
推荐指数
1
解决办法
2663
查看次数

是否可以仅在移动设备上使用Twitter Bootstraps .navbar-fix-to-top?

我有这个导航栏的Twitter Bootstrap 3网页:

<div class="col-xs-12 col-md-10 col-md-offset-1">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">
          Title
        </a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        ...
      </div>
    </nav>
</div>
Run Code Online (Sandbox Code Playgroud)

它在桌面上看起来很不错,有一些上边距.但是,是否可以仅在移动设备上使用.navbar-fixed-to-top?那么在移动设备上,导航栏始终位于顶部,没有顶部,左侧和右侧边距?

html css twitter-bootstrap

7
推荐指数
2
解决办法
1万
查看次数

检测移动设备并重定向的最佳方法

这是我根据屏幕尺寸检测移动显示的代码段。您可以通过向URL添加forceDesktop参数来强制网站保持桌面模式。

我是jquery新手,所以如果您有建议,请发表评论。

致谢brandonjp: 如何获取JavaScript中的查询字符串值?

        <script>
            $.urlParam = function(name, url) {
                if (!url) {
                    url = window.location.href;
                }
                var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
                if (!results) { 
                    return undefined;
                }
                return results[1] || undefined;
            }
            window.onload = function() {
                var forceDesktop = $.urlParam('forceDesktop');
                if (!forceDesktop) {
                    if ( $(window).width() < 639) {   
                        var url = "http://m.mysite.com/";    
                        $(location).attr('href',url);
                    }
                }
            };
        </script>
Run Code Online (Sandbox Code Playgroud)

mobile jquery redirect detect screen-size

7
推荐指数
2
解决办法
2万
查看次数

移动设备中的桌面和光滑幻灯片是否可以取消?

我想在桌面上禁用滑块,但需要在移动设备中滑动,你可以帮帮我吗?

$('.slider').slick({
     slidesToShow: 5,
     slidesToScroll: 1,
     autoplay: false,
     autoplaySpeed: 2000,
     responsive: [
        {
           breakpoint: 767,
           settings: "unslick"
        }
     ]
  });
Run Code Online (Sandbox Code Playgroud)

jquery slider slick.js

7
推荐指数
3
解决办法
2万
查看次数

页面加载后移动视图变小

我对我开发的其中一个网站有一点问题.问题很简单,但解决方案似乎有点困难.

问题

问题是页面首先应该在移动设备上呈现,但在页面加载完成后,页面会调整大小以适应视口.没什么奇怪的,这几乎发生在每个没有响应的网站上.但奇怪的是,只有75%的可用宽度被使用.

我已经将设计的基础/切片版本与生产版本进行了比较.基础版本确实渲染(100%宽度).我试图发现CSS中的差异,但我只能找到一对,我尝试重置那些,但这不起作用.

此外,我试图禁用javascript(它只是Lightbox和1 JqueryUI"AddClass"效果).javascript效果只有1个任务:在页面加载后,标题将从480px调整为220px高度.页面上的任何元素的宽度都没有变化.

最后但并非最不重要的是,我启动了Adobe Edge Inspect,并查看了移动设备的页面源.但不幸的是,我无法发现页面上超出"body"标签宽度的任何元素.唯一超过宽度的是标题图像,但图像在div(100%宽度)内overflow:hidden

基础和生产版本

如果有人愿意看一下弄乱渲染的东西,那就太棒了.我似乎无法找出导致问题的原因.

基于(工作):http://www.nambi.nl/lefunq/ 生产(在移动设备上以75%的宽度渲染):http://www.lefunq.com/_index.php

感谢每个花时间研究这个问题的人.

html css responsive-design

6
推荐指数
1
解决办法
224
查看次数

用javascript检测移动设备的最简单方法

检测设备是否是带有javascript的移动设备的最简单方法是什么?

我在考虑检查高度是否小于或等于iPhone的浏览器视口高度.说到iPhone,移动设备的常见视口高度是什么?

window.height;在javascript 中遇到了一些麻烦,因为它回来了未定义,但是?

任何人都知道如何做到最好,只是检测浏览器是否是一个带有JavaScript的移动设备?

javascript

6
推荐指数
1
解决办法
1万
查看次数