Использование PHP и jQuery для обнаружения мобильных устройств
Я пытаюсь обнаружить мобильные браузеры на веб-странице, которую я создаю. Те, кто на рабочем столе, увидят «липкое» меню, а те, что на мобильных устройствах, — нет.
Но у меня есть базовые навыки, которые на самом деле не выходят за рамки HTML и CSS, поэтому мне понятно, как заставить это работать. Я надеюсь, что кто-то может указать на все очевидные вещи, которые я ошибаюсь, не осознавая …
Я использую 51Degrees PHP детектор мобильных устройств (http://sourceforge.net/projects/fiftyone/).
В моих основных веб-файлах я следую указаниям здесь: http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/ включить липкое меню на страницу, используя jQuery.
Так что я хочу применить изменения CSS CSS для «липкого меню», только если пользователь НЕ находится на мобильном устройстве, используя значение, возвращаемое мобильным детектором PHP.
Раздел PHP:
<?php
session_start();
include_once('51Degrees/core/51Degrees.php');
include_once('51Degrees/core/51Degrees.usage.php');
?>
Согласно документации, которая дает переменную $_51d[‘IsMobile’] значение True или False в зависимости от браузера пользователя.
Исходя из того, что я прочитал, значение PHP можно передать в jQuery, поскольку оба они находятся в одном файле. То, что я нашел, предложило использовать что-то вроде этого: var mobile = <?php echo ($_51d[‘IsMobile’]); ?>;, Тогда я хотел бы проверить, если mobile был истинным или ложным, и продолжайте с остальной частью сценария, если он был ложным. Но я не уверен, как именно это сделать, или правильный синтаксис. В любом случае, я не получаю желаемого результата.
<script type="text/javascript">
//<![CDATA[
$(function(){ // document ready
var mobile = <?php echo ($_51d[‘IsMobile’]); ?>;
if (mobile == 'false') {
if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
var stickyTop = $('.sticky').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
$('.sticky').css({ position: 'fixed', top: 0 });
}
else {
$('.sticky').css('position','static');
}
});
}
}
});
//]]>
</script>
Могу поспорить, что это что-то действительно очевидное и глупое, что я скучаю здесь, но с моим отсутствием фона это просто не происходит со мной. Любая помощь будет оценена.
РЕДАКТИРОВАТЬ:
Спасибо за все Ваши ответы. После того, как я поигрался с некоторыми предложениями, мне кажется, что моей главной проблемой является получение значения переменной из PHP в jQuery (на той же странице).
Что-то не так с var mobile = <?php echo ($_51d[‘IsMobile’]); ?>;, Значение просто не передается в jQuery. Все, что я вижу на странице источника var mobile = ; и я пробовал различные способы написания этого, чтобы приспособить альтернативные методы PHP.
Кто-нибудь замечает, что не так?
Решение
Вы можете легко сделать это
<script type="text/javascript">
if (screen.width <= 800) {
//do whatever you want
}
</script>
Другие решения
Вы можете обнаружить мобильное устройство с помощью jquery
$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
Modernizr лучший плагин для этого.
плагин предоставляет html-тегу множество полезных классов, которые вы можете использовать в своих css или jquery. (например, мобильное устройство, сенсорное устройство и т. д.)
JQuery:
if($('html').hasClass('touch')){ /* forgot the exact name of the classes modernizr gives the html tag. just look it up at your tag after you installed the plugin */
// do something only in mobile
}
но в вашем случае я бы определенно предложил сделать это с помощью mediaquerys и css.
Таким образом, для портрет смартфона использовать:
@media all and (max-width: 420px) {}
за смартфон пейзаж использовать:
@media all and (max-width: 580px) {}
за планшетный портрет использовать:
@media all and (max-width: 768px) {}
за планшетный пейзаж использовать:
@media all and (max-width: 1024px) {}
не забудьте установить окно просмотра в голове, например:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
привет тимофей
Мне нравится мобильный детект (http://mobiledetect.net/). Это класс PHP с открытым исходным кодом, который вы можете добавить в свое приложение и затем использовать так:
$detect = new Mobile_Detect;
$mobile = $detect->isMobile();
if($mobile)
// Call mobile page template
else
// Call desktop page template
Используя примеры из http://detectmobilebrowsers.com/
PHP:
<?php
$useragent = $_SERVER['HTTP_USER_AGENT'];
if(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|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))) {
$isMobile = true;
} else {
$isMobile = false;
}
?>
JQuery:
<script>
(function(a){(jQuery.browser=jQuery.browser||{}).mobile=/(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|xda|xiino/i.test(a)||/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.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);
var isMobile = jQuery.browser.mobile;
</script>
Чтобы использовать версию PHP, а затем получить доступ $isMobile в вашем Javascript / jQuery;
<script>
var mobile = '<?php echo ($isMobile); ?>';
if (mobile == false) {
console.log('FALSE');
} else {
console.log('TRUE');
}
</script>