निर्भर करता है अगर एक डेस्कटॉप या मोबाइल ब्राउज़र

Question

बस मोबाइल उपकरणों के लिए सीएसएस बारे में एक प्रश्न पर उपयोगकर्ता यात्राओं,

मैं एक छवि है कि मेरी वेबसाइट पर विस्तृत है 1260px और जब मैं सीएसएस में एक अलग छवि निर्दिष्ट करने का तरीका इसे फोन पर देखें, यह वेबसाइट को नष्ट कर देता है क्योंकि शेष वेबसाइट 960px लेआउट पर आधारित होती है।

मैंने इन छवियों को अब मोबाइल डिवाइस के लिए 960px चौड़ा बनाया है, लेकिन मैं सीएसएस में कैसे निर्दिष्ट करूं कि यदि यह नियमित वेबसाइट पर मोबाइल की बजाय मोबाइल अनुकूलित मोबाइल अनुकूलित छवि है।

तो मूल रूप से एक उपयोगकर्ता एक डेस्कटॉप कंप्यूटर पर वेबसाइट पर चला जाता है अगर यह 1260px छवि

दिखाएगा और अगर वे एक मोबाइल पर वेबसाइट पर जाएँ यह 960px छवि

किसी भी विचार लोगों को प्रदर्शित करेगा?

Answer 1

इम यकीन नहीं आप जे एस चाहते हैं, तो मैं तुम्हें CSS3 चाहते हैं, तो आपके सवाल का जवाब देने का फैसला किया है, इस प्रयास करें:

HTML:

<img src="image.jpg" 
    data-src-960px="image-960px.jpg" 
    data-src-1260px="image-1260px.jpg" 
    alt=""> 

सीएसएस:

@media (min-device-width:320px) { 
     img[data-src-960px] { 
      content: attr(data-src-960px, url); 
     } 
    } 

    @media (min-device-width:960px) { 
     img[data-src-1260px] { 
      content: attr(data-src-1260px, url); 
     } 
    } 

jQuery संस्करण:

$(document).ready(function() { 

function imageresize() { 
var contentwidth = $('#content').width(); 
if ((contentwidth) < '960'){ 
$('.imageclass').attr('src','image-960px.jpg'); 
} else { 
$('.imageclass').attr('src','image-1260px.jpg'); 
} 
} 

imageresize();//Activates when document first loads     

$(window).bind("resize", function(){ 
imageresize(); 
}); 

}); 

Answer 2

आप मीडिया प्रश्नों की तलाश में हैं। आप चौड़ाई पर सशर्त शैलियों लिख सकते हैं:

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://www.w3.org/TR/css3-mediaqueries/

Answer 3

इवान के जवाब से प्रेरित होकर, यहाँ एक jQuery संस्करण मीडिया क्वेरी का उपयोग कि अधिक से अधिक निकट उसकी CSS3 के समाधान के लिए (जो फ़ायरफ़ॉक्स 31 में मेरे लिए काम नहीं करता हो रहा है और सफारी 7):

$(document).ready(function() { 
    var mqsmall = "(min-device-width:320px)"; 
    var mqbig = "(min-device-width:960px)"; 
    function imageresize() { 
     if(window.matchMedia(mqbig).matches) { 
      $('img[data-src-1260px]').each(function() { 
       $(this).attr('src',$(this).attr('data-src-1260px')); 
      }); 
     } 
     else if(window.matchMedia(mqsmall).matches) { 
      $('img[data-src-960px]').each(function() { 
       $(this).attr('src',$(this).attr('data-src-960px')); 
      }); 
     } 
    } 

    imageresize(); 

    $(window).bind("resize", function() { 
     imageresize(); 
    }); 
});