无法让这个脚本在iphone上正常运行6.不断上升为"不可移动".我错过了什么?
$(document).ready(function(){
if ($(window).width < 700){
alert("mobile");
}
else {
alert("not mobile");
}
});
Run Code Online (Sandbox Code Playgroud)
编辑:道歉,我在这里输入的代码有一个错字,但不是我的问题的原因.我对iphone分辨率有不准确的信息.感谢大家!
我正在寻找检测平板电脑的完美方法.使用媒体查询,您可以为特定CSS设置最小和最大宽度.但有些平板电脑的分辨率高于soms桌面显示器.这样会产生冲突.
使用Javascript(Modernizr,Detectivizr)可识别平板电脑并在HTML中使用HTML标签上的"平板电脑"类设置此平板电脑.但是......并非所有用户都启用了Javascript.
所以你想要的是(在我看来)使用CSS来检测平板电脑.有谁知道这个的完美解决方案?
Thanx提前!
解释:我的一位客户希望在他的响应式网站上运行背景视频.不过,他还希望将其移除给平板电脑/移动用户.我知道这可以通过媒体查询完成,但视频仍然会作为DOM的一部分加载,这就是我想要阻止的.
问题:
在以特定宽度加载视口时,可以使用DOM中的JavaScript/jQuery删除视频元素吗?
如果手动增加视口是否可以恢复相同的视频?(我怀疑这是一个糟糕的方法)
视频会显示"display:none;" 仍会影响平板电脑/手机的加载/电池续航时间?
谢谢你的帮助.
javascript html5 html5-video media-queries responsive-design
我怎样才能在我的网站的移动版本中将图像从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; 只隐藏图像而不是停止下载.
注意:这不是针对版权保护问题,例如防止右键单击等,而是针对移动的下载内容的速度和最终大小.
我正在为Apple i*设备开发一个网站,该网站使用HTML5 webkit功能,例如转换,但我想禁用iPhone <3GS和iPod touch <3rd Gen等较旧/较慢的iPhone型号的一些奇特的东西,因为在这些设备上的转换是太慢了.
有没有办法在Javascript中检测确切的模型(不仅仅是操作系统/用户代理)?
我有这个导航栏的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?那么在移动设备上,导航栏始终位于顶部,没有顶部,左侧和右侧边距?
这是我根据屏幕尺寸检测移动显示的代码段。您可以通过向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) 我想在桌面上禁用滑块,但需要在移动设备中滑动,你可以帮帮我吗?
$('.slider').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 767,
settings: "unslick"
}
]
});
Run Code Online (Sandbox Code Playgroud) 我对我开发的其中一个网站有一点问题.问题很简单,但解决方案似乎有点困难.
问题
问题是页面首先应该在移动设备上呈现,但在页面加载完成后,页面会调整大小以适应视口.没什么奇怪的,这几乎发生在每个没有响应的网站上.但奇怪的是,只有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
感谢每个花时间研究这个问题的人.
检测设备是否是带有javascript的移动设备的最简单方法是什么?
我在考虑检查高度是否小于或等于iPhone的浏览器视口高度.说到iPhone,移动设备的常见视口高度是什么?
我window.height;在javascript 中遇到了一些麻烦,因为它回来了未定义,但是?
任何人都知道如何做到最好,只是检测浏览器是否是一个带有JavaScript的移动设备?
css ×4
html ×4
javascript ×4
jquery ×3
mobile ×3
html5 ×2
desktop ×1
detect ×1
html5-video ×1
iphone ×1
ipod-touch ×1
performance ×1
redirect ×1
screen-size ×1
slick.js ×1
slider ×1
tablet ×1
width ×1