さまざまなビューポートの高さに基づいて CSS で要素をスケーリングするのは、控えめに言っても退屈であり、IMO は必要ありません。繰り返しますが、私は完全に間違っているかもしれません。
ビューポートの高さに基づいて要素のスケールを自動的に設定するために、jQuery を使用することがまったく可能かどうか疑問に思っていますか?
私はStackflowでここで見つけることができるすべてのリンクを無駄にチェックしました.http://ricostacruz.com/jquery.transit/をチェックアウトしましたが、これは実行可能なオプションのようですが、高さと回転を計算する方法がわかりませんそれを値に変換して、CSS 変換スケールに使用できるようにします。よくわかりませんが、特定の高さがプリセット値になるように「チェックポイント」が必要かもしれません。
また、要素がほとんどのビューポートに収まるようにスケーリングを調整できるように、スケールを手動で調整できる必要もあります。
これは私の例です: http://testsiten.se/modernaglas/images/showcase/bedroom/
ビューポートの高さに応じてスケーリングし、向きが変更された場合は更新するために、クラス .scales 内のコンテンツ全体が必要です。
幅は高さと同じなので、高さよりも広くなることはないので問題はありません。
.scalesの高さを変更すると、デザイン全体が壊れてしまうので、変更したくありません。
私は本当にくだらない CSS メディア クエリをいくつか実行しましたが、jQuery を使用してこれらすべてを簡単に行う必要があると考えたため、クリーンアップされていません。
これは私のCSSです。
body, html{ background-color: #333333; font-family: tahoma; margin: 0; padding: 0; }
img{background: none}
h1 {font-size: 18px; margin: 0; font-weight: normal; text-align: center}
#ChangableElements {width: 958px; margin:0 auto; }
#navigation {background-color: #bdc7c9; color: #6e7377;padding: 7px 8px 5px 21px;}
#navigation div div {display: inline-block;}
#navigation div div span{display: block;}
.nav_glas, .nav_ram {display: inline-block;font-size: 13px;text-align: center;}
.nav_glas div, .nav_ram div{padding: 1px 13px 0 10px;}
.nav_glas div a, .nav_ram div a{display: inline-block; margin: 8px 0 10px;}
.nav_ram{float: right;}
.work_area {margin-bottom: 0; background: url("images/bg_image.png") repeat scroll 0 0 transparent; height: auto;width: 958px;}
.border, .grid{margin-top: 0px;position: absolute;top: 0;}
.grid_on {width: 50px}
.headers h1{display: inline-block;}
.headers h1:first-child{float: left; margin-left: 10px; }
.headers{display: block!important;padding: 0 !important;}
.hidden {display: none;}
私のメディア クエリの 1 つ
@media only screen and (min-device-width : 719px) and (max-device-width : 721px) and (orientation : portrait) {
div.scales
{
transform: scale(0.37);
-ms-transform: scale(0.37); /* IE 9 */
-webkit-transform: scale(0.37); /* Safari and Chrome */
-o-transform: scale(0.37); /* Opera */
-moz-transform: scale(0.37); /* Firefox */
transform-origin: top center;
-ms-transform-origin: top center;
-webkit-transform-origin: top center;
-o-transform-origin: top center;
-moz-transform-origin: top center;
}
}
これは私のjQueryです：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function changeImage(el, img_url) {
$(document).find(el).attr('src', img_url);
}
$(document).ready(function(){
// add color btns event
$('.nav_glas').find('a.spegel').click(function(){
changeImage('#mirror', 'images/spegel.png');
});
$('.nav_glas').find('a.vit_traskiva').click(function(){
changeImage('#mirror', 'images/vit_traskiva.png');
});
$('.nav_glas').find('a.vitt_glas').click(function(){
changeImage('#mirror', 'images/vitt_glas.png');
});
$('.nav_glas').find('a.metall_glas').click(function(){
changeImage('#mirror', 'images/metall_gra.png');
});
$('.nav_glas').find('a.gult_glas').click(function(){
changeImage('#mirror', 'images/gult_glas.png');
});
$('.nav_glas').find('a.rott_glas').click(function(){
changeImage('#mirror', 'images/rott_glas.png');
});
$('.nav_glas').find('a.svart_glas').click(function(){
changeImage('#mirror', 'images/svart_glas.png');
});
});
</script>
<script type="text/javascript">
function changeImage(el, img_url) {
$(document).find(el).attr('src', img_url);
}
var app = {
isActive: function(el){
if($(el).hasClass('active')) {
return true;
}
else {
return false;
}
},
whoActive: function(){
return $('.active').attr('id');
},
change_grid: function(image){
changeImage('#grid', image);
}
}
$(document).ready(function(){
// add color btns event
$('.nav_ram').find('a.vit').click(function(){
$('a').removeClass('active');
$(this).addClass('active');
changeImage('#border', 'images/vit_el.png');
app.change_grid('images/grid_vit.png');
});
$('.nav_ram').find('a.silvermatt').click(function(){
$('a').removeClass('active');
$(this).addClass('active');
changeImage('#border', 'images/silver_el.png');
app.change_grid('images/grid_silvermatt.png');
});
$('.nav_ram').find('a.svart').click(function(){
$('a').removeClass('active');
$(this).addClass('active');
changeImage('#border', 'images/svart_blank_el.png');
app.change_grid('images/grid_svart.png');
});
// grid_turn_on event
$('.grid_turn_on').click(function(event){
var grid_on = $('.grid_on'); // div el
var grid = $('#grid');
var is_hidden = false;
if(grid.hasClass('hidden')) {
is_hidden = true;
}
else {
is_hidden = false;
}
log(app.whoActive());
switch (app.whoActive()) {
case 'vit':
log('is vit');
if(is_hidden) {
grid.removeClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_on.jpg');
changeImage('#grid', 'images/grid_silvermatt.png');
} else {
grid.addClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_off.jpg');
}
break;
case 'silvermatt':
log('is silver');
if(is_hidden) {
grid.removeClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_on.jpg');
changeImage('#grid', 'images/grid_silvermatt.png');
} else {
grid.addClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_off.jpg');
}
break;
case 'svart':
log('is svart');
if(is_hidden) {
grid.removeClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_on.jpg');
changeImage('#grid', 'images/grid_svart.png');
} else {
grid.addClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_off.jpg');
}
break;
default:
if(is_hidden) {
grid.removeClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_on.jpg');
}
else {
grid.addClass('hidden');
grid_on.find('span').empty().append('Ja/Nej');
grid_on.find('img').attr('src','images/grid_off.jpg');
}
}
});
});
</script>
これが私の HTML です。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<title>mirror</title>
</head>
<body>
<div class="scales" id="ChangableElements">
<div class="work_area">
<img src="images/grid_svart.png" alt="" id="grid" class="grid">
<img src="images/svart_blank_el.png" alt="" id="border" class="border">
<img src="images/vitt_glas.png" alt="" id="mirror">
</div>
<div id="navigation">
<div class="nav_glas">
<h1>Välj färg på glas/skiva</h1>
<div><a class="spegel"><img src="images/pic1.jpg" alt=""></a><span>Spegel</span></div>
<div><a class="vit_traskiva"><img src="images/pic2.jpg" alt=""></a><span>Vit träskiva</span></div>
<div><a class="vitt_glas"><img src="images/pic3.jpg" alt=""></a><span>Vitt glas</span></div>
<div><a class="metall_glas"><img src="images/pic4.jpg" alt=""></a><span>Metallgrått glas</span></div>
<div><a class="gult_glas"><img src="images/pic5.jpg" alt=""></a><span>Gult glas</span></div>
<div><a class="rott_glas"><img src="images/pic6.jpg" alt=""></a><span>Rött glas</span></div>
<div><a class="svart_glas"><img src="images/pic7.jpg" alt=""></a><span>Svart glas</span></div>
</div>
<div class="nav_ram" id="tfoot">
<div class="headers">
<h1>Spröjs</h1>
<h1>Välj färg på dörrens ram</h1>
</div>
<div class="grid_on"><a class="grid_turn_on" ><img src="images/grid_on.jpg" alt=""></a><span>Ja/Nej</span></div>
<div><a class="vit" id="vit"><img src="images/pic2_1.jpg" alt=""></a><span>Vit blank</span></div>
<div><a class="silvermatt" id="silvermatt"><img src="images/pic2_2.jpg" alt=""></a><span>Silvermatt</span></div>
<div><a class="svart" id="svart"><img src="images/pic2_3.jpg" alt=""></a><span>Svart blank</span></div>
</div>
</div>
</div>
</body>
</html>
ご覧のとおり、.scales 内には多くの要素があり、そこには背景画像もあります。.scales のスケールに依存する要素が非常に多いため、高さを設定するのではなく、スケーリングする必要があるのはこのためです。
私は今自分自身を理解してくれたことを願っています。:D
編集：これを機能させるために、最終的にいくつかのjQを学びました。
<script type="text/javascript">
$(document).ready(function(){
$(window).on('resize', function(){
var vpheight = $(window).height();
var vpwidth = $(window).width();
if(vpwidth>vpheight) {
// Landscape
var height = $(window).height() * 0.00148;
var width = height / 2 * -958;
$('.scales').css('transform', 'scale(' + height + ')');
$('.scales').css('-ms-transform', 'scale(' + height + ')');
$('.scales').css('-webkit-transform', 'scale(' + height + ')');
$('.scales').css('-o-transform', 'scale(' + height + ')');
$('.scales').css('-moz-transform', 'scale(' + height + ')');
$('#ChangableElements').css({'left': width + 'px'});
} else if(vpwidth <=720 && vpheight > 569 ) {
var height = $(window).height() * 0.000675;
var width = height / 2 * -958;
$('.scales').css('transform', 'scale(' + height + ')');
$('.scales').css('-ms-transform', 'scale(' + height + ')');
$('.scales').css('-webkit-transform', 'scale(' + height + ')');
$('.scales').css('-o-transform', 'scale(' + height + ')');
$('.scales').css('-moz-transform', 'scale(' + height + ')');
$('#ChangableElements').css({'left': width + 'px'});
} else {
// Portrait
var height = $(window).height() * 0.000895;
var width = height / 2 * -958;
$('.scales').css('transform', 'scale(' + height + ')');
$('.scales').css('-ms-transform', 'scale(' + height + ')');
$('.scales').css('-webkit-transform', 'scale(' + height + ')');
$('.scales').css('-o-transform', 'scale(' + height + ')');
$('.scales').css('-moz-transform', 'scale(' + height + ')');
$('#ChangableElements').css({'left': width + 'px'});
}
}).resize()
});
</script>
奇妙な vpwidth <=720 && vpheight > 569 は、Samsung Galaxy S3 を適切に機能させるためのものです。変な解像度…