可能重复:
在jQuery中检测手持设备的最佳方法
我想制作一个我的网络应用程序的移动版本.我如何运行一个函数来检测是否从桌面或移动浏览器发出请求?
这样,如果用户从移动浏览器请求他们点击链接,而不是去实际页面,它应该被劫持并做一些其他事件.
提前致谢..
假设我只是想针对每个平板电脑和手机,无论大小,是否有媒体查询?是否可以在不指定尺寸的情况下执行此操作?或者使用大小是唯一的方法来定位移动设备,而不是桌面?
我有一个Web应用程序,手机用户可以看到移动优化的网站.新的三星Galaxy SIII用户代理无法提供请求来自手机的线索.检测手机有哪些最佳实践?
我知道javascript特征检测(即现代化),但我希望有更好的东西.以下是三星Galaxy SIII用户代理:
Mozilla/5.0(X11; Linux x86_64)AppleWebKit/534.24(KHTML,与Gecko一样)Chrome/11.0.696.34 Safari/534.24
编辑:SIII有两个可能的用户代理.以上是"桌面"版本.好玩的东西.请参阅以下链接了解详情.
我对我开发的其中一个网站有一点问题.问题很简单,但解决方案似乎有点困难.
问题
问题是页面首先应该在移动设备上呈现,但在页面加载完成后,页面会调整大小以适应视口.没什么奇怪的,这几乎发生在每个没有响应的网站上.但奇怪的是,只有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如何检测指针是否为触摸屏。它正在使用@media像
@media (pointer: coarse){
body{
// do something
}
}
Run Code Online (Sandbox Code Playgroud)
但我只是想知道如何使用javascript或JQuery实现它,这可能吗?
谢谢,对不起我的英语
我们可以通过将媒体流请求到屏幕或Windows navigator.mediaDevices.getDisplayMedia()。但是,这立即提示用户决定要使用哪种捕获。我需要检查浏览器/平台是否支持屏幕捕获。
当然,可以检查'getDisplayMedia' in navigator.mediaDevices,但这只是告诉我们浏览器是否支持该API。特别是在FF和Android上的Chrome上,已定义了API并且可以调用该API getDisplayMedia(),但它总是立即返回NotAllowedError错误(这是可以预期的:根据caniuse的说法,移动浏览器尚不支持getDisplayMedia。)
接下来,我尝试检查navigator.mediaDevices.getSupportedConstraints()。但是,我的移动FF返回与桌面FF完全相同的对象。尤其navigator.mediaDevices.getSupportedConstraints().mediaSource是true在这两种情况下。最后,返回的数据navigator.mediaDevices.enumerateDevices()也无济于事。我只能得到无法以任何方式解释的设备和组ID(对吗?)。
是否可以getDisplayMedia事先检测是否支持通过屏幕捕获?
(注意:此问答似乎相当相似,但getUserMedia已经相当久远了)
我的网站具有粘性导航,但它不适用于移动设备...
如何在移动设备上粘贴它,或者如何防止粘性(当然保持导航)?
我到处寻找答案,但找不到一个有效(并没有禁用我的导航:)你的帮助非常感谢!
这是我的index.html标题的一部分:
<head>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/960.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/smooth-scroll.js" type="text/javascript"></script>
<script src="js/jquery.sticky.js" type="text/javascript"></script>
<script src="contactform.js" type="text/javascript"></script>
<!-- sticky nav -->
<script type="text/javascript">
$(window).load(function(){
$("nav").sticky({ topSpacing: 0, className: 'sticky', center: true });
});
</script>
</head>
Run Code Online (Sandbox Code Playgroud)
这是jquery.sticky javascript中的代码:
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
center: false
},
$window = $(window),
$document …Run Code Online (Sandbox Code Playgroud) 我正在尝试找到一个解决方案,将单个页面从我的WordPress网站重定向到移动版本(我不想将所有移动用户的所有页面重定向到不同的页面或主题,只有一页).
但是,我还没有找到一个可以做到这一点的插件.无论如何,我只是想找一个简单的方法让移动设备重定向到我的单页,希望通过一种不断"更新"自己的方法,如DetectMobileBrowsers或WURFL.
在线完成了一些研究之后,我遇到了一些可以区分WordPress网站上不同页面的PHP代码,例如:
<?php if (is_page(1111)) {…….}; ?>
Run Code Online (Sandbox Code Playgroud)
我正在考虑做的是在PHP代码中放置一些移动重定向脚本,这样我就可以实现我的目标,即只需要在我的网站上的一个页面上进行移动重定向.
但是,我试图将来自detectmobilebrowsers.com的代码(包括PHP和Javascript)放入PHP代码中,并且尝试将它放在header.php和page.php中都无济于事(事实上,它崩溃了我的网站)大多数情况下,或只是不起作用).我错了吗?我使用错误的代码吗?我需要一个插件来帮助解决这个问题吗?
----更新2 ----
我下次尝试代码:
add_action( 'template_redirect', 'redirect_so_19285382' );
function redirect_so_19285382()
{
if (is_page(2766))
return;
if( is_mobile_detectmobilebrowsers_com() ) { wp_redirect( site_url( 'http://lifebyjohn.com/mobile-schedule' ) ); exit(); }
}
function is_mobile_detectmobilebrowsers_com()
{
$useragent=$_SERVER['HTTP_USER_AGENT'];
return
preg_match( '/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i', $useragent )
|| preg_match( '/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i', substr( $useragent,0,4 ) );
}
Run Code Online (Sandbox Code Playgroud) 现在,所有现代网络浏览器都提供“阅读器视图”模式。是否可以通过CSS和/或Javascript告诉浏览器在屏幕宽度最大为480px的移动设备上自动使用“阅读器视图”版本?
我只是不想创建该网站的移动版本,因为“阅读器视图”版本可以在移动设备(屏幕宽度为320px-480px)上完美运行。
PS。触发“阅读器视图”图标时,我不需要信息-我想在屏幕宽度小于480px的移动设备上强制使用“阅读器视图”模式。此外,Reader View模式也可以在其他浏览器中使用(不仅在Firefox中)。