Правим Viewport для мобильного IE 10 (Drupal)

В мобильной версии IE 10 responsive макеты отображаются не верно. Для того, чтобы детально разобраться в таком поведении браузера Вы можете прочитать статьи Tim Kadlec и Matt Stow, а для того, чтобы узнать, как исправить такое поведение достаточно прочитать эту заметку.

Если бы мир был идеален, тогда для правильной работы viewport было бы достаточно использовать следующий CSS.

/* Поместить в начало Вашего style.css */
@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width} 
@-ms-viewport{width:device-width} 
@-o-viewport{width:device-width} 
@viewport{width:device-width}

Но этого не достаточно для правильной работы viewport в IE 10 mobile. Чтобы исправить это, необходимо использовать следующий javascript, причем поместить его надо перед всем остальным js кодом:

// viewport_fix.js
if (navigator.userAgent.match(/IEMobile\/10\.0/) || navigator.userAgent.match(/WPDesktop/)){
  var msViewportStyle = document.createElement("style");
  msViewportStyle.appendChild(
    document.createTextNode(
      "@-ms-viewport{width:auto!important}"
    )
  );
  document.getElementsByTagName("head")[0].
  appendChild(msViewportStyle);
}
<br>

navigator.userAgent.match(/WPDesktop/) - такая проверка необходима для WP8, где есть возможность включить режим Desktop у браузера.

JS перед любым другим JS в Drupal 7

И так, если Вы используете Drupal, и хотите использовать выше упомянутое исправление, то Вы сталкнетесь с нем, а как же разместить JS код перед любым другим JS кодом. Для этого мы воспользуемся hook_preprocess_html() и hook_js_alter().

Поместим наш js в файл viewport_fix.js. В вашу тему (template.php) или модуль (your_module.module) добавляем: (код)

/**
 * Implements hook_preprocess_html().
 */
function THEME_preprocess_html(&$variables) {
  // path_to_theme().'/js/uspeh_viewport_fix.js' - Путь к viewport_fix.js.
  drupal_add_js(path_to_theme().'/js/viewport_fix.js',array(
    'group' => JS_LIBRARY, 
    'weight' => -500)
  );
}

На этом мы бы могли и остановиться, но оказывается, что drupal_add_js() в незвисимости от того какой указан вес ('weight' => -500) у скрипта поместит misc/drupal.js и другие системные скрипты до него. Поэтому добавляем следующее:

/**
 * Implements hook_js_alter().
 */
function THEME_js_alter(&$javascript) {
  $javascript[path_to_theme().'/js/viewport_fix.js']['group'] = -500;
  $javascript[path_to_theme().'/js/viewport_fix.js']['weight'] = -500;
}<br>