カラーミーショップのスマホサイト対応で後から気づいたこと
カラーミーショップのPCサイトはXHTML 1.0で作られており、このヘッダー部分は触れることができません。これはカラーミーのオリジナルタグを使用するため仕方のないことなわけですが(昔に作られたままなので)、これによってレスポンシブ化させるために、カラーミーは以下のようなオリジナルのjavascriptを設置しています。
$(function() {
// viewport
var viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
document.getElementsByTagName('head')[0].appendChild(viewport);
// dropdown nav
$('.btn-dropdown').click(function () {
$(this).parent().children('.dropdown-nav').slideToggle('fast');
$(this).toggleClass('btn-dropdown-close');
$('.icon-list', this).toggleClass('icon-chevron_up');
});
$('.dropdown-wrapper').skOuterClick(function () {
$('.dropdown-nav' ,this).slideUp('fast');
$('.btn-dropdown' ,this).removeClass('btn-dropdown-close');
$('.icon-list', this).removeClass('icon-chevron_up');
});
// grid layout
var $container = $('.prd-lst');
$container.imagesLoaded( function() {
$container.masonry({
itemSelector: '.prd-lst-unit'
});
});
$(window).resize(function () {
$container.masonry({
itemSelector: '.prd-lst-unit'
});
});
function window_size_switch_func() {
// header dropdown nav position
$(window).scroll(function () {
var switch_pos = $('#page-wrapper').offset().top;
if(switch_pos == 0) {
$('.header-dropdown').addClass('affix');
} else {
$('.header-dropdown').removeClass('affix');
if(switch_pos <= $(window).scrollTop()) {
$('.header-dropdown').addClass('affix');
} else {
$('.header-dropdown').removeClass('affix');
}
}
});
// product option switch -> empty
$('#prd-opt-select').html('');
$('#prd-opt-table').html('');
if($('.visible-phone').css('display') == 'none') {
// pagetop
$(window).scroll(function () {
if($(this).scrollTop() > 200) {
$('#pagetop').fadeIn('fast');
} else {
$('#pagetop').fadeOut('fast');
}
});
// product option switch -> table
$('#prd-opt-table').html($('.prd-opt-table').html());
$('#prd-opt-table table').addClass('table');
} else {
// product option switch -> select
$('#prd-opt-select').html($('.prd-opt-select').html());
}
}
window_size_switch_func();
$(window).resize(function () {
window_size_switch_func();
});
});
このコードでviwportをヘッダーに付加しレスポンシブを可能とするわけですが、けっこうこのコードが邪魔でうまくいかないことがしばしばありました。
これはどうしたものかと思っていましたところ、カラーミーにスマホ用の切り替えがあるではないですか!(正直知らなかった。(;´∀`))
スマホ用のテーマ設定では、ヘッダーはhtml5で作られております。いやいや、もっと早くに気づくべきでした。。。
この記事へのコメントはありません。