मैं एक साइट एक मोबाइल स्टाइलशीट है कि है:मोबाइल साइट - केवल बल परिदृश्य/कोई स्वत: घुमाने
<link rel="stylesheet" href="css/mobile.css" media="handheld">
मैं भी मोबाइल उपकरणों के लिए जाँच करें और उसके अनुसार कार्यक्षमता को बदलने के लिए jQuery का उपयोग कर रहा हूँ।
लेकिन मैं जानना चाहता हूं कि परिदृश्य-केवल उन्मुखीकरण को मजबूर करने और स्वत: घुमाने को अक्षम करने का कोई तरीका है या नहीं? या तो एक सीएसएस या एक jQuery समाधान ठीक होगा।
धन्यवाद!
आप वेब पेज में अभिविन्यास को मजबूर नहीं कर सकते हैं, लेकिन आप पोर्टारिट मोड में सामग्री का सुझाव दे सकते हैं या ब्लॉक कर सकते हैं।
मैं एक div तत्व
<div id="block_land">Turn your device in landscape mode.</div>
जोड़ने अपने html फ़ाइल में एक existing script
के adaptation बनाया तो फिर अपने सभी पेज
#block_land{position:absolute; top:0; left:0; text-align:center; background:white; width:100%; height:100%; display:none;}
कवर करने के लिए अपने सीएसएस अनुकूलन फिर से थोड़ा अधिक जोड़ने अभिविन्यास का पता लगाने के लिए जावास्क्रिप्ट
function testOrientation() {
document.getElementById('block_land').style.display = (screen.width>screen.height) ? 'none' : 'block';
}
मत भूलना, ऑनलोड और onorientationchange में उन्मुखीकरण परीक्षण करने के लिए हो सकता है आपके शरीर टैग में
<body onorientationchange="testOrientation();" onload="testOrientation();">
मुझे पता है इस समाधान आप के लिए काम करता है, तो चलो।
अभिविन्यास का परीक्षण करने के लिए मीडिया प्रश्नों का उपयोग करें, चित्र स्टाइलशीट में सब कुछ छिपाएं और एक संदेश दिखाएं कि ऐप केवल लैंडस्केप मोड पर काम करता है।
<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">
मुझे लगता है कि मुझे लगता है कि सबसे अच्छा तरीका स्क्रिप्ट है, ताकि जब उपयोगकर्ता परिवर्तन, यह परिवर्तन सबसे अच्छा aproach
है। मैंने इसे संशोधित किया ताकि यह आपके पृष्ठ को मुख्य डीआईवी को पोर्ट्रेट में घुमाए, उपयोगकर्ता को स्विच करने के लिए मजबूर कर दिया जाए। जब तक वे अपने सिर बग़ल में झुकाव हैं:
<script type="text/javascript">
(function() {
detectPortrait();
$(window).resize(function() {
detectPortrait("#mainView");
});
function detectPortrait(mainDiv) {
if (screen.width < screen.height) {
$(mainDiv).addClass("portrait_mode");
}
else {
$(mainDiv).removeClass("portrait_mode");
}
}
})();
</script>
<style type="text/css">
.portrait_mode {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
यह निश्चित रूप से किसी भी जेएस एनीमेशन और पृष्ठ की मोबाइल प्रतिक्रिया को तोड़ देगा।इससे डेवलपर को और समस्या होगी और इसे एक फिक्स के रूप में नहीं माना जा सकता है। –
@ WissamEl-Kik यह अभी भी करता है जो ओपी चाहता है। और वास्तव में, ओपी के लिए क्या पूछता है वह मोबाइल प्रतिक्रिया को भी तोड़ देगा, इसलिए आप ऐसा करने के लिए इस जवाब को दोष नहीं दे सकते! हालांकि वास्तव में जावास्क्रिप्ट की आवश्यकता नहीं है; इसे 'अभिविन्यास: चित्र' मीडिया क्वेरी के साथ ट्रिगर करना भी काम करेगा। –
मैं निम्नलिखित कोड की कोशिश की और यह ब्राउज़र मजबूर पोर्ट्रेट मोड का उपयोग करें:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
इस कोड को एक iPhone पर और एक अन्य पर परीक्षण किया गया मोबाइल डिवाइस।
मुझे क्षमा करें महोदय, मुझे लगता है कि कोड केवल उपयोगकर्ता को ज़ूम इन या आउट करने से रोकता है। एंड्रॉइड 4.3 में आईफोन 4 एस और क्रोम में सफारी पर परीक्षण किया गया, दोनों परिदृश्य और पोर्ट्रेट मोड अभी भी संभव हैं। –
सरल लैंडस्केप ओरिएंटेशन के लिए मजबूर करने तरीका है अपने सीएसएस कोड में अपने न्यूनतम-अधिकतम चौड़ाई सेट कर दिया जाता है, इस कोड
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
body {
-webkit-transform: rotate(90deg);
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}}
आशा आपकी समस्या का समाधान का प्रयास करें।
तो मैंने एक समान समाधान की कोशिश की और जिस समस्या में मैंने भाग लिया वह कई लोगों के अभिविन्यास को बंद कर दिया गया था। तो, उनके लिए अनलॉक करना वास्तव में परेशान था। आदर्श रूप से पृष्ठ केवल परिदृश्य में दिखाई देगा (जैसे कई गेम ऐप्स करते हैं)। इसे हल करने के लिए सीएसएस रोटेशन का उपयोग करने के लिए जा रहे हैं। – gman