आईओएस सफारी

में अभिविन्यास परिवर्तन को रोकें क्या डिवाइस घुमाए जाने पर आईओएस के लिए सफारी में लैंडस्केप व्यू में संक्रमण से बचना संभव है?आईओएस सफारी

आईओएस सफारी "orentationchange" घटना है, मैं इसे रोकने और अक्षम डिफ़ॉल्ट व्यवहार, इस तरह की कोशिश की:

<html> 
<head> 
<script type="text/javascript"> 
function changeOrientation(event) { 
    alert("Rotate"); 
    event.preventDefault(); 
} 
</script> 
</head> 
<body onorientationchange="changeOrientation(event);"> 
PAGE CONTENT 
</body> 
</html>

लेकिन जब मेरे iPhone, पर पेज का परीक्षण कर रहा डिवाइस चेतावनी बारी बारी से जब दिखाया गया है, लेकिन दृश्य परिदृश्य पर स्विच। ऐसा लगता है कि event.preventDefault() रोटेशन को रोकता नहीं है।

क्या इस व्यवहार को अवरुद्ध करने का कोई तरीका है?

स्रोत

2011-03-14 Davide Gualano

संबंधित: http://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application – xdhmoore

पढ़ें प्रश्न @xdhmoore से जुड़ा हुआ है। यह इसके अलावा बहुत सार्थक है। – Boaz

मोबाइल सफारी में एक विशेष अभिविन्यास को मजबूर करने का कोई तरीका नहीं है; जब उपयोगकर्ता अपने डिवाइस को घुमाता है तो यह हमेशा ऑटोरोटेट होगा।

शायद आप असमर्थित उन्मुखताओं के लिए कुछ प्रदर्शित कर सकते हैं जो उपयोगकर्ता को सूचित करते हैं कि उन्मुखता समर्थित नहीं हैं, और उन्हें आपके वेब ऐप का उपयोग करने के लिए डिवाइस को घुमाने की आवश्यकता है।

स्रोत

2011-03-14 12:27:53 BoltClock

-3

यदि यह संभव है (जो मुझे विश्वास नहीं है), तो मैं दृढ़ता से इसके खिलाफ सलाह दूंगा। उपयोगकर्ताओं को किसी विशेष तरीके से पृष्ठों को देखने में मजबूर होना नफरत है। क्या होगा यदि वे अपने आईफोन का उपयोग किसी डॉक में कर रहे हैं और इसे बिना अनदेखा किए लैंडस्केप मोड में खड़े कर सकते हैं, या क्या होगा यदि वे कीबोर्ड के लैंडस्केप वर्जन को पसंद करते हैं क्योंकि चाबियाँ बड़ी हैं?

यदि आपके डिज़ाइन को एक विशेष अभिविन्यास की आवश्यकता है तो आप अपने डिज़ाइन पर पुनर्विचार करना चाहेंगे।

स्रोत

2011-03-14 12:31:54 GordonM

मैं जिस वेबैप का निर्माण कर रहा हूं वह शहर के चारों ओर पैदल चलने वाले उपयोगकर्ताओं को लक्षित कर रहा है, इसलिए मैं सोच रहा था कि डिफ़ॉल्ट चित्र दृश्य इसका अनुभव करने का अधिक प्राकृतिक तरीका हो सकता है। मुझे अलग-अलग परिदृश्यों के बारे में सोचना होगा, मुझे यह इंगित करने के लिए धन्यवाद। –

+12

यदि आपका ऐप उदाहरण के लिए डिवाइसोरिएंटेशन इवेंट्स का उपयोग करता है, तो आप यह नहीं चाहते हैं कि जब उपयोगकर्ता डिवाइस को एक दिशा में बहुत दूर ले जाए, तो उस गेम के लिए जो बहुत परेशान हो जाएगा। –

इस तरह की टिप्पणियां इतनी घमंडी हैं। अधिकतर गैर-बेवकूफ उपयोगकर्ता केवल इन 'कस्टम व्यू' विकल्पों का उपयोग करते हैं क्योंकि वे जिस वेब पेज को देख रहे हैं वह भयानक उपयोगिता और लेआउट या छोटे फ़ॉन्ट इत्यादि है ... बस यह बताते हुए कि उपयोगकर्ता लचीलापन चाहते हैं, वह बहुत उपयोगी नहीं है। स्वत: घूर्णन सामग्री को रोकने के लिए मेटा टैग अतिरिक्तता बहुत अधिक जरूरी है - ऐप्स इसे कर सकते हैं ... – tim

Jonathan Snook इस समस्या के आसपास एक काम है। अपनी स्लाइड here में, वह दिखाता है कि पोर्ट्रेट को कैसे लॉक करें (सॉर्ट करें) (स्लाइड 54 और 55 देखें)।

उन स्लाइड से जे एस कोड:

window.addEventListener('orientationchange', function() { 
    if (window.orientation == -90) { 
     document.getElementById('orient').className = 'orientright'; 
    } 
    if (window.orientation == 90) { 
     document.getElementById('orient').className = 'orientleft'; 
    } 
    if (window.orientation == 0) { 
     document.getElementById('orient').className = ''; 
    } 
}, true);

और सीएसएस:

.orientleft #shell { 
    -webkit-transform: rotate(-90deg); 
    -webkit-transform-origin:160px 160px; 
} 

.orientright #shell { 
    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin:230px 230px; 
}

मैं इस परिदृश्य iPhone पर के लिए काम पाने की कोशिश की है, लेकिन यह कभी नहीं देखा 100 % सही बात। हालांकि, मैं निम्नलिखित jQueryian कोड के साथ आया था। यह पहले से ही समारोह में होगा। यह भी ध्यान दें: यह "होमस्क्रीन में सहेजा गया" संदर्भ में था, और मुझे लगता है कि ट्रैनफॉर्म-उत्पत्ति की स्थिति बदल गई है।

$(window).bind('orientationchange', function(e, onready){ 
    if(onready){ 
     $(document.body).addClass('portrait-onready'); 
    } 
    if (Math.abs(window.orientation) != 90){ 
     $(document.body).addClass('portrait'); 
    } 
    else { 
     $(document.body).removeClass('portrait').removeClass('portrait-onready'); 
    } 
}); 
$(window).trigger('orientationchange', true); // fire the orientation change event at the start, to make sure

और सीएसएस:

.portrait { 
    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin: 200px 190px; 
} 
.portrait-onready { 
    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin: 165px 150px; 
}

आशा में मदद करता है कि किसी को वांछित परिणाम के करीब ...

स्रोत

2011-08-15 05:35:55 fisherwebdev

क्या आपने ट्रांसफॉर्म उत्पत्ति को 0,0 पर बदलने का प्रयास किया था? – tim

मैंने इसे वोट दिया, सिर्फ इसलिए कि उसने मुझे इतना हंस दिया। सरल! – Westie

मेरे पास यह विचार था, लेकिन यह सुनिश्चित नहीं था कि यह काम करेगा ... यह सुनकर खुशी हुई: डी यह स्वीकार्य उत्तर होना चाहिए – nevelis

एक spec इस कार्यक्षमता को लागू करने का प्रस्ताव किया गया है।

अतिरिक्त जानकारी के लिए this Chromium bug देखें (अभी भी अस्पष्ट है कि इसे वेबकिट या क्रोमियम में लागू किया जाएगा या नहीं)।

स्रोत

2012-03-05 06:09:55

मुझे लगता है कि हमारे मामले के लिए जहां हमें मेडिकल सर्वेक्षण के लिए स्क्रीन पर प्रदर्शित डेटा के लगातार दृश्य प्रदान करने की आवश्यकता है, डिवाइस की स्क्रीन के घूर्णन की अनुमति नहीं दी जा सकती है। हम चित्र को चित्र में काम करने के लिए डिजाइन करते हैं।तो उपयोग के लिए सबसे अच्छा समाधान या तो इसे लॉक करना है, जो ब्राउज़र के माध्यम से नहीं किया जा सकता है, या एक त्रुटि/संदेश प्रदर्शित करता है जो संकेत देता है कि अभिविन्यास ठीक होने तक एप्लिकेशन का उपयोग नहीं किया जा सकता है।

स्रोत

2012-05-16 17:54:05

हो सकता है कि एक नया भविष्य में

...

मई 2015 के लिए के रूप में,

करता है कि एक प्रयोगात्मक कार्यक्षमता है। लेकिन यह केवल फ़ायरफ़ॉक्स 18+, आईई 11 +, और क्रोम 38+ पर काम करता है।

हालांकि, यह अभी तक ओपेरा या सफारी पर काम नहीं करता है।

var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation; 

lockOrientation("landscape-primary");

स्रोत

2015-05-13 18:37:19

निम्नलिखित समाधान iPhone4, 5, 6 पर मेरे लिए काम कर रहा है, और 6 +

जून 2016 के रूप में:

https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation#Browser_compatibility

यहाँ संगत ब्राउज़र के लिए वर्तमान कोड है

<script> 
    /** 
    * we are locking mobile devices orientation to portrait mode only 
    */ 
    var devWidth, devHeight; 
    window.addEventListener('load', function() { 
    devWidth = screen.width; 
    devHeight = screen.height; 
    }); 
    window.addEventListener('orientationchange', function() { 
    if (devWidth < 768 && (window.orientation === 90 || window.orientation == -90)) { 
     document.body.style.width = devWidth + 'px'; 
     document.body.style.height = devHeight + 'px'; 
     document.body.style.transform = 'rotate(90deg)'; 
     document.body.style.transformOrigin = ''+(devHeight/2)+'px '+(devHeight/2)+'px'; 
    } else { 
     document.body.removeAttribute('style'); 
    } 
    }, true); 
</script>

स्रोत

2016-06-03 22:23:02 allenhwkim

आप जैसे अन्य संगठनों में कहा गया है आपने कोई परिवर्तन नहीं का अनुकरण कर सकते हैं प्रभाव लेने से उन्मुखीकरण परिवर्तन नहीं रोका जा सकता है एर जवाब

पहले डिवाइस अभिविन्यास या पुनरावृत्ति का पता लगाएं और जावास्क्रिप्ट का उपयोग करके, अपने रैपिंग तत्व में कक्षा का नाम जोड़ें (इस उदाहरण में मैं बॉडी टैग का उपयोग करता हूं)।

function deviceOrientation() { 
    var body = document.body; 
    switch(window.orientation) { 
    case 90: 
     body.classList = ''; 
     body.classList.add('rotation90'); 
     break; 
    case -90: 
     body.classList = ''; 
     body.classList.add('rotation-90'); 
     break; 
    default: 
     body.classList = ''; 
     body.classList.add('portrait'); 
     break; 
    } 
} 
window.addEventListener('orientationchange', deviceOrientation); 
deviceOrientation();

फिर अगर डिवाइस परिदृश्य है, उपयोग सीएसएस व्यूपोर्ट ऊंचाई व्यूपोर्ट चौड़ाई के शरीर की ऊंचाई के लिए शरीर चौड़ाई सेट करने के लिए। और जब हम इसमें हों तो ट्रांसफॉर्म उत्पत्ति सेट करें।

@media screen and (orientation: landscape) { 
    body { 
    width: 100vh; 
    height: 100vw; 
    transform-origin: 0 0; 
    } 
}

अब, शरीर तत्व और स्लाइड (अनुवाद कर) यह स्थिति में पुनः अनुकूल।

body.rotation-90 { 
    transform: rotate(90deg) translateY(-100%); 
} 
body.rotation90 { 
    transform: rotate(-90deg) translateX(-100%); 
}

स्रोत

2016-11-27 09:01:18

आईओएस सफारी

उत्तर

संबंधित मुद्दे