Я использую следующий JavaScript для определения ширины экрана и использования его в качестве константы в файлах шаблонов с помощью условных операторов для отображения / отображения не отображаемых частей моего сайта. Хотя он не имеет ничего общего с моими вопросами, но на всякий случай … Да, я использую WordPress. Также я уже использую библиотеку PHP с mobiledetect.
function getLayoutWidth() { if (isset($_GET['width'])) { define( "SCREEN_WIDTH", $_GET['width']); } else { echo "<script language='javascript'>\n"; echo " location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}" . "&width=\" + screen.width;\n"; echo "</script>\n"; exit(); } } Важный :
Другие методы похожи на …… Предположим, что если мой сайт имеет размер 2 МБ, он все равно загрузит 2 МБ контента, а затем скроет его на мобильных устройствах на 1,5 МБ, используя свойства CSS, такие как display:none; Принимая во внимание, что я не хочу, чтобы эта часть шаблона загружалась сама по себе, поэтому ничего не нужно было скрывать.
Я не хочу загружать всю библиотеку JavaScript, такую как jQuery, или так, чтобы сделать это, потому что location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}". "&width=\" + screen.width; location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}". "&width=\" + screen.width; это единственный JavaScript на моем сайте. Остальное – это чистый PHP, HTML и CSS. Я даже отключил jQuery WordPress в интерфейсном шаблоне.
ОБНОВЛЕНИЕ: Поскольку некоторые друзья не поняли мою точку зрения, хотя я ясно сказал, что я вообще не хочу загружать контент в DOM, я здесь немного разъясняю …..
Для примера — @ 1200px Я хочу показать только одну боковую панель. @ 1600px Я хочу, чтобы 2 боковых панели отображались, и более 1600 пикселей. Мне нужно отобразить 3 боковых панели. Пожалуйста, не предлагайте решения Media Queries, как я уже знаю, и это именно то, что я не хочу делать. Я хочу избежать загрузки содержимого в DOM. Пожалуйста, давайте сосредоточимся только на заданных вопросах. Также, пожалуйста, не отправляйте предложения в качестве ответов. Пусть другие отвечают правильными ответами. Пожалуйста, разместите предложения в разделе комментариев.
Мои вопросы :
Это хороший / правильный способ сделать с точки зрения SEO? Если не так?
Мой URL-адрес отображается как example.com/my-product-category/my-product-name/?width=1440 Как удалить /?width=1343 и отобразить только example.com/my-product-category/my-product-name часть?
Простой ответ, нет, это не хорошо с точки зрения SEO. Или любая другая точка зрения. Сканеры, такие как Googles, предназначены для полного игнорирования всех hidden элементов, и, таким образом, вы потеряете большой рейтинг SEO-времени, если ваш контент не будет полностью сканирован, а сканеры сканируют каждый сайт несколько раз, маскируя под мобильные устройства, чтобы проверить, поддерживает ли сайт мобильный контент , http://www.seonick.net/responsive-design-seo/
Не говоря уже о том, что проблема расчета вашей произвольной точки отсечки .5mb не имеет никакой цели, если контент просто скрыт (поскольку все его отправление в любом случае не сохраняет пропускную способность).
Вам нужно сделать это в чистом CSS, используя медиа-запросы, это наиболее совместимый способ и позволяет создать жидкостный дизайн (изменения в дороге по мере изменения размера окна.
<link rel="stylesheet" media="(max-width: 700px)" href="mobile.css"> <link rel="stylesheet" media="(min-width: 700px)" href="full.css">
Это будет использовать один файл css, если окно меньше 700px, а другое, если оно закончено.
Другим из моих более любимых методов является использование класса http://mobiledetect.net/ . Его небольшая и быстрая, более точная и удобная гибкость. Загрузите этот класс, а затем просто добавьте классы в свой элемент body в зависимости от браузера посетителей.
<body class="<?PHP if ($detect->isMobile() && !$detect->isTablet()) echo " .phone";?>">
Затем стиль, ориентируясь на классы внутри body.phone . Этот метод также гарантирует, что ваш браузер будет мобильным до того, как DOM начнет обрабатывать, что означает, что вы можете обслуживать сжатые версии изображений с помощью простой логики, а не сводить их CSS или просто изменять их размер или опускать целые части разметки полностью переданный пользователю, обеспечивает пропускную способность только для частей DOM, относящихся к пользовательскому устройству.
<body> This is normal content and will be visible to all devices <?PHP if (!$detect->isMobile()) { ?> This content will only be visible to desktop users, in fact it wont even be transmitted to mobile users thus making it NOT in the DOM <?PHP } ?> </body>
Чтобы установить файл cookie в javascript
function Cookies(){}; Cookies.prototype.save=function(name,value,days){ if( days ) { var date = new Date(); date.setTime( date.getTime()+( days*24*60*60*1000 ) ); var expires = "; expires="+date.toGMTString(); var dom = "; domain="+document.domain; } else { expires = ""; } var path = "; path=/"; var tmp=[]; if( typeof( value )=='object' ) { for( p in value ) tmp.push( p+'='+value[ p ] ); value=tmp.join(';'); } document.cookie = name+"="+value+expires+path; }; Cookies.prototype.read=function(name){ var nameEQ = name + "="; var ca = document.cookie.split(';'); for( var i=0; i < ca.length;i++ ) { var c = ca[i]; while( c.charAt(0)==' ') c = c.substring(1,c.length); if( c.indexOf( nameEQ ) == 0 ) return c.substring( nameEQ.length, c.length ); } return null; }; Cookies.prototype.erase=function(name){ this.save( name, "", -1 ); }; var cn='jsdim'; var ckie=new Cookies; ckie.save( cn, JSON.stringify({ width:screen.availWidth, height:screen.availHeight, colour:screen.colorDepth, depth:screen.pixelDepth }), 1 );
В PHP
<?php if( isset( $_COOKIE['jsdim'] ) ){ $json=json_decode( $_COOKIE['jsdim'] ); if( !defined('SCREEN_WIDTH') ) define( 'SCREEN_WIDTH', $json->width ); if( !defined('SCREEN_HEIGHT') ) define( 'SCREEN_HEIGHT', $json->height ); if( !defined('SCREEN_COLOUR_DEPTH') ) define( 'SCREEN_COLOUR_DEPTH', $json->colour ); if( !defined('SCREEN_PIXEL_DEPTH') ) define( 'SCREEN_PIXEL_DEPTH', $json->depth ); } ?>
Я не думаю, что размер экрана / разрешение действительно то, что вы хотите настроить шаблоны просмотров для мобильных устройств. На самом деле вы хотите знать, что использует платформа / устройство, подумайте о Nexus 7, который имеет 1920 × 1200 или Sony Xperia Z5 с 2160 x 3840px.
Я бы посмотрел на пользовательский агент и HTTP-заголовки для кода на стороне сервера, для этого уже есть хорошие библиотеки: например, mobiledetect . Для клиентской стороны наилучшей практикой является использование запросов CSS3 Media: медиа-запросы для стандартных устройств
Вы можете удалить $ _GET URL-адреса htaccess, я использую RewriteRule .
Options +FollowSymLinks RewriteRule ^folder/file.php$ folder/file.php?g=2 #if you want to remove php file extension, don't keep the .php before the $
Чтобы удалить все расширения php-файлов: php.net .
Изменить: это для тех, кто не использует WordPress
Вы можете использовать этот плагин: https://wordpress.org/plugins/mobble/ Он добавляет is_mobile() -feature.
В вашей теме теперь вы можете использовать is_mobile() вместо $_GET['width'] > ... Таким образом, вам не нужна ?width= в вашем $_GET