PHP, JavaScript - правильно ли определять ширину экрана путем перенаправления заголовка

Я использую следующий JavaScript для определения ширины экрана и использования его в качестве константы в файлах шаблонов с помощью условных операторов для отображения/отображения не отображаемых частей моего сайта. Хотя он не имеет ничего общего с моими вопросами, но на всякий случай ... Да, я использую WordPress. Также я уже использую библиотеку PHP с mobiledetect.PHP, JavaScript - правильно ли определять ширину экрана путем перенаправления заголовка

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(); 
     } 
    }

Важно:

Другие методы, как ...... Давайте предположим, что, если мой сайт 2MB размер, он будет по-прежнему нагрузки 2MB содержания, а затем скрыть 1.5Mb от этого на мобильных устройствах, используя свойства CSS, такие как display:none;. Принимая во внимание, что я не хочу, чтобы эта часть шаблона загружалась сама по себе, поэтому ничего не нужно было скрывать.
Я не хочу загружать всю библиотеку JavaScript, например, jQuery или так, потому что location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}". "&width=\" + screen.width; - это единственный JavaScript на моем весь сайт. Остальное - это чистый PHP, HTML и CSS. Я даже отключил jQuery WordPress в интерфейсном шаблоне.

UPDATE: Поскольку некоторые друзья не получили мою точку зрения, хотя я уже ясно, что я не хочу, чтобы загрузить содержимое в 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?

источник

2015-10-17 Vikram Rao

Лично, если бы я хотел получить размеры экрана, я бы установил cookie. Если файл cookie не существует, установите его, иначе прочитайте его (он должен быть способен читать как js, так и php). – RamRaider

@RamRaider Спасибо за предложение. Ну, я очень плохо разбираюсь в этой части программирования. Я в первую очередь парень из HTML/CSS. Будете ли вы достаточно любезны ответить на этот вопрос некоторым PHP-кодом, чтобы установить и прочитать cookie –

. Вам нужно делать это с помощью CSS, а не php/jscript. – Wobbles

Простой ответ, нет, это не хорошо с точки зрения SEO. Или любая другая точка зрения. Сканеры, такие как Googles, предназначены для полного игнорирования всех элементов hidden, и, таким образом, вы потеряете крупный 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 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>

источник

2015-10-17 15:36:58 Wobbles

Вы пытаетесь остановить поток данных после определенного объем передачи, т. е. плохой способ делать что-то для мобильных пользователей и вообще в целом, а скрытый атрибут css не позволяет загружать данные в DOM, он просто делает его скрытым видимым, тем самым ничего не делая. Я пытаюсь показать вам, как вы ДОЛЖНЫ делать это, тем самым полностью устраняя проблемы. – Wobbles

@ Викрам Рао, вторая часть моего ответа охватывает это, вам нужно прочитать ответ. – Wobbles

@ Vikram Rao ' Не так сложно отфильтровать элементы для целевых устройств. – Wobbles

Вы можете уединиться за $ _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.

Edit: это для тех, кто не использует Wordpress

источник

2015-10-17 15:11:48 Hydro

Это не решит проблему. Я просто выполнил тест, который все еще загружает контент, он просто не показывает его. Аскер уже указал это на открытии. – Xesau

@ Xesau Вы должны помнить, что изменение URL-адреса htaccess будет изменять местоположение файла, тогда рекомендуется загружать скрипты и стили с помощью URL-адреса веб-сайта ('$ wurl =" http://website.com "; - '). И я удалил CSS-запросы в отношении ответа,; | – Hydro

Также вопрос заключался не в том, как скрыть расширение .php. – Xesau

-1

Вы можете использовать этот плагин: https://wordpress.org/plugins/mobble/ Он добавляет is_mobile() -feature.

В вашей теме вы можете теперь использовать is_mobile() вместо $_GET['width'] > ... Таким образом, вам не нужно в вашем $_GET

источник

2015-10-17 15:30:58 Xesau

Смешно, мой ответ закрывается, в то время как «Wobbles» говорит точно так же и получает одобрение. ... – Xesau

Я на самом деле поддержал вас, потому что OP downvoting всех разработчиков на этом, пытаясь научить правильной разработке адаптивного дизайна, смешно. Разбивайте все ответы, пока они действительны, были опущены им. И ваш пост - 2 предложения, вряд ли ответ, в то время как у меня есть пара абзацев со ссылками, примерами и объяснением того, почему нет оптимистического дизайна для SEO, поэтому нет, не «точно так же». – Wobbles

@ Wobbles другой ответ, который я удалил из-за нисходящего потока, который дал ОП, и те, которые следовали (люди склонны понижать ответы, которые уже имеют отрицательную репутацию), но также предложили решение. Я поставил вопрос, тем не менее, – Xesau

в ?width= Чтобы установить куки в 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); 
    } 
?>

источник

2015-10-17 15:35:38 RamRaider

, но что делать, если файлы cookie отключены в браузере? И для первого запроса cookie не установлен, так что это бесполезно ... – falsecrypt

это хороший момент для того, чтобы быть отключенным в браузере, но если вы изучите исходный код, константа php не будет объявлена до тех пор, пока не будет вызван javascript и перезагрузили страницу в любом случае. Я согласен с использованием CSS для достижения макета жидкости, а не из-за большого количества придирчивости, как описано выше, но OP хотел установить ширину как константу, поэтому это было всего лишь предложение :) – RamRaider

Я не думаю, что размер экрана/разрешение действительно то, что вы хотите настроить шаблоны для мобильных устройств. На самом деле вы хотите знать, что использует платформа/устройство, подумайте о Nexus 7, который имеет 1920 × 1200 или Sony Xperia Z5 с 2160 x 3840px.

Я бы посмотрел на пользовательский агент и HTTP-заголовки для кода на стороне сервера, для этого уже есть хорошие библиотеки: например. mobiledetect. Для клиентской стороны наилучшей практикой является использование запросов CSS3 Media: Media Queries for Standard Devices

источник

2015-10-17 16:03:54 falsecrypt

@VikramRao почему вы думаете, что 1024px, 1600px или больше 1600px - это экраны рабочего стола? Перед публикацией таких вопросов вы должны прочитать некоторые публикации в области литературы/блога о Front End Development. – falsecrypt

Мне действительно все равно, являются ли они настольными экранами или нет. Пожалуйста, сосредоточьтесь на моих вопросах. Я очень четко упомянул о своем требовании. Пожалуйста, прочитайте их снова. –

PHP, JavaScript - правильно ли определять ширину экрана путем перенаправления заголовка

ответ

Смежные вопросы