मैं यह पता लगाने की कोशिश कर रहा हूं कि एक एम्बेडेड वेब पेज को कैसे बदला जाए जब उपयोगकर्ता अपने फोन को पोर्ट्रेट से लैंडस्केप मोड में घुमाता है - मूल रूप से व्यापक दृश्य प्रारूप के लिए उपयुक्त एक दृश्य लोड करने के लिए। क्या यह सर्वर से एक नया पेज कॉल किए बिना करना संभव है, यानी इसे सीएसएस/जावास्क्रिप्ट के भीतर से ड्राइव करने के लिए?क्या मैं आईफोन अभिविन्यास परिवर्तन पर मोबाइल सफारी में एक सीएसएस कार्यक्रम ट्रिगर कर सकता हूं?
धन्यवाद!
आप window.orientation संपत्ति का उपयोग कर सकते हैं। इसका मूल्य वह डिग्री है जो वर्तमान मोड का उपयोग किया जाता है। यहाँ एक संक्षिप्त उदाहरण है:
function updateOrientation()
{
var orientation=window.orientation;
switch(orientation)
{
case 0:
break;
case 90:
break;
case -90:
break;
}
}
आप इस घटना पर इस सुविधा का उपयोग कर सकते हैं:
window.onorientationchange=updateOrientation;
आशा है कि मदद करता है!
सफारी मोबाइल orientation events का समर्थन करता है।
सफारी मोबाइल ब्राउज़र orientationchange घटना के लिए समर्थन के साथ ही खिड़की पर orientation संपत्ति है, तो आप की तरह कुछ कर सकते हैं: मैं क्योंकि आईपैड मानव इंटरफ़ेस उलटा जोड़ना होगा
window.onorientationchange = function() {
switch(window.orientation) {
case 0: // Portrait
case 180: // Upside-down Portrait
// Javascript to setup Portrait view
break;
case -90: // Landscape: turned 90 degrees counter-clockwise
case 90: // Landscape: turned 90 degrees clockwise
// Javascript to steup Landscape view
break;
}
}
दिशानिर्देशों का कहना है कि आपको सभी उन्मुखताओं का समर्थन करना चाहिए, इसलिए मैं इसे समर्थन देने के लिए आईपैड (और संभवतः भविष्य के आईफोन संस्करण) पर सफारी की अपेक्षा करूंगा।
<body onorientationchange="updateOrientation();">
onorientationchange संपत्ति सीधे सेट करने के लिए नहीं बेस्ट।
window.addEventListener('orientationchange', function (evt) {
switch(window.orientation) {
case 0: // portrait
case 180: // portrait
case 90: // landscape
case -90: // landscape
}
}, false);
मैं विश्वास नहीं कर सकता कोई भी सीएसएस सत्तारूढ़ बारे में बात की:
@media screen and (max-width: 320px) // Portait Mode
{
/* CSS RULINGS */
p{}
body{}
}
@media screen and (min-width: 321px) // Landscape Mode
{
/* CSS RULINGS */
p{}
body{}
}
यह निश्चित रूप से स्वीकार किए जाते हैं जवाब की तुलना में अधिक सही है इसके बजाय निम्नलिखित का उपयोग करें। –