jQuery Mobile Landscape and Portrait Class
-
27-09-2019 - |
سؤال
لقد بدأت في استخدام إطار عمل jQuery Mobile ، لكن لا يمكنني استخدام دروس المشهد والتقاطية لتصنيع الأساليب.
يقول الوثائق
سيكون لعنصر HTML دائمًا فئة من "صورة" أو "مشهد" ، اعتمادًا على اتجاه المتصفح أو الجهاز.
لذلك أنا تحت الانطباع بذلك <h1>foo</h1>
سيكون إما <h1 class="landscape">foo</h1>
أو <h1 class="portrait">foo</h1>
حتى الآن h1.landscape { font-size:16px; }
و h1.portrait { font-size:9px; }
لا يبدو أنه يعمل.
إذا تمكن أي شخص من تسليط الضوء على هذا ، فسيكون موضع تقدير كبير.
المحلول
موافق. قررت أن أرى ما يجري واستخدم حليقة للحصول على الرمز المصدر عبر عرض Android.
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://www.actwebdesigns.co.uk');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Linux; U; Android 1.1; en-gb; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2');
$html = curl_exec($ch);
echo $html;
العنصر الوحيد الذي يحتوي على مشهد أو فئة صورة هو علامة HTML.
<html xmlns="http://www.w3.org/1999/xhtml" class="ui-mobile landscape min-width-320px min-width-480px min-width-768px min-width-1024px"><head><meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"></html>
لقد لاحظت أيضًا أن الإطار لا يقوم بتبديل الفصل التلقائي على الدوران ، لذا فإن الكود التالي الذي اختبرته يعمل.
<script type="text/javascript">
$(window).resize( function(){
$('html').toggleClass('landscape, portrait');
});
</script>
الخردة أعلاه التي لها عيوب.
<script type="text/javascript">
$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();
var ob = $('html');
if( width > height ) {
if( ob.hasClass('portrait') ) {
ob.removeClass('portrait').addClass('landscape');
}
}else{
if( ob.hasClass('landscape') ) {
ob.removeClass('landscape').addClass('portrait');
}
}
});
</script>
باستخدام liitle من تومي لوكانين السيناريو أعلاه يعمل بشكل جيد.
نصائح أخرى
آسف ولكن هذا قديم! منذ HTML5 لديك في CSS3 Mediaqueries. الآن يمكنك أن تقرر الأسلوب في CSS:
@media screen and (orientation: landscape) {
h1 {
color: red;
}
#someId {
width: 50%;
}
}
@media screen and (orientation: portrait) {
h1 {
color: blue
}
#someId {
width: 100%;
}
}
تتم إضافة فصول الصورة والمناظر الطبيعية إلى عنصر HTML (وليس كل عنصر في الصفحة) ، لذلك تريد أن يبحث محدد CSS عن المناظر الطبيعية/الصورة أولاً. الأعمال التالية:
html.landscape h1 { font-size:16px; }
html.portrait h1 { font-size:9px; }
ضع هذا في مكون إضافي ليل
(function($){
$.fn.portlandSwitch = function ( options ) {
// redefine styles to either landscape or portrait on phone switch
$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();
var ob = $('html');
if( width > height ) {
if( ob.hasClass('portrait') ) {
ob.removeClass('portrait').addClass('landscape');
}
}else{
if( ob.hasClass('landscape') ) {
ob.removeClass('landscape').addClass('portrait');
}
}
});
}
})(jQuery);
$.portlandSwitch();
استخدم هذه الوظيفة:
//Detect change rotation
function doOnOrientationChange()
{
switch(window.orientation)
{
case -90:
case 90:
alert('landscape');
$('body').addClass('landscape');
$('body').removeClass('portrait');
break;
default:
alert('portrait');
$('body').addClass('portrait');
$('body').removeClass('landscape');
break;
}
}
فيما يلي نسخة تعمل بالكامل (استنادًا إلى رمز Phil Jackson) تم اختبارها على أجهزة مختلفة :)
أنا متأكد من أن jQuery Mobile تستخدم للتعامل مع هذا ، ومع ذلك لدي نسخة عمل أخرى تعتمد على اتجاه الشاشة ، ومع ذلك أعتقد أن هذا سيكون أفضل بسبب البساطة ...
if($(window).width() > $(window).height()){
if($('body').hasClass('portrait')){
$('body').removeClass('portrait').addClass('landscape');
} else if(!$('body').hasClass('portrait')) {
$('body').addClass('landscape');
}
}
else {
if($('body').hasClass('landscape')){
$('body').removeClass('landscape').addClass('portrait');
} else if(!$('body').hasClass('landscape')) {
$('body').addClass('portrait');
}
}
هذا يضيف فئة الصورة أو المناظر الطبيعية ، لا تحتاج إلى ترميز ذلك إلى ملف القالب الخاص بك :)
شكرًا