কেবলমাত্র ল্যান্ডস্কেপ মোডে দেখানোর জন্য ওয়েব সাইটকে বাধ্য করছে

Question 1

আমি আমার ওয়েব সাইটটি কেবল আড়াআড়ি মোডে দেখাতে চাই, এটি কি সম্ভব? ব্যবহারকারীর হাতে ওরিয়েন্টেশনটি ডিভাইসের কী তা বিবেচনাধীন নয় তবে ওয়েবসাইটটি সর্বদা ল্যান্ডস্কেপ মোডে থাকবে। আমি আইফোন অ্যাপ্লিকেশনটিকে সেভাবে কাজ করতে দেখেছি তবে এটি কোনও কোনও ওয়েব সাইটের জন্য করা যেতে পারে?

Question 2

@ গোলমাল সত্যই এর জবাব দিয়েছিল, আমি কেবল আরও কিছুটা ভারবস হয়ে যাচ্ছি।

<style type="text/css">
    #warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }
</style>

....

<div id="wrapper">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>

ওরিয়েন্টেশনটি সরিয়ে নেওয়া ব্যবহারকারীর উপর আপনার কোনও নিয়ন্ত্রণ নেই তবে আপনি কমপক্ষে সেগুলি বার্তা দিতে পারেন। এই উদাহরণটি প্রতিকৃতি মোডে থাকলে মোড়কে আড়াল করবে এবং সতর্কতা বার্তাটি প্রদর্শন করবে এবং তারপরে ল্যান্ডস্কেপ মোডে সতর্কতা বার্তাটি আড়াল করবে এবং প্রতিকৃতিটি প্রদর্শন করবে।

আমি মনে করি না যে উত্তরটি গোলমালের চেয়ে আরও ভাল, কেবল এটির প্রশংসা। আপনি যদি এই উত্তরটি পছন্দ করেন তবে @ গোলমালকে .ণ দেওয়ার বিষয়টি নিশ্চিত করুন।

হালনাগাদ

আমি কর্ডোভার সাথে সম্প্রতি অনেকটা কাজ করেছি এবং যখন আপনি দেশীয় বৈশিষ্ট্যে অ্যাক্সেস পাবেন তখন এটি নিয়ন্ত্রণ করতে পারে AN

আরেকটি আপডেট

সুতরাং কর্ডোভা মুক্তি দেওয়ার পরে শেষ পর্যন্ত এটি সত্যিই ভয়ানক। আপনি জাভাস্ক্রিপ্ট চাইলে প্রতিক্রিয়া নেটিভ জাতীয় কিছু ব্যবহার করা ভাল। এটি সত্যিই আশ্চর্যজনক এবং আমি জানি এটি খাঁটি ওয়েব নয় তবে মোবাইল ধরণের বিশুদ্ধ ওয়েব অভিজ্ঞতা ব্যর্থ।

Question 3

আমি নিজেও এখানে কোনও উত্তরের জন্য অপেক্ষা করছিলাম, তবে আমি ভাবছি যে এটি সিএসএসের মাধ্যমে করা যেতে পারে:

@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}

Question 4

এটি চেষ্টা করুন এটি আপনার পক্ষে আরও উপযুক্ত হতে পারে

#container { display:block; }
@media only screen and (orientation:portrait){
  #container {  
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (orientation:landscape){
  #container {  
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}

<div id="container">
    <!-- your html for your website -->
    <H1>This text is always in Landscape Mode</H1>
</div>

স্নিপেট প্রসারিত করুন

এটি স্বয়ংক্রিয়ভাবে এমনকি ঘূর্ণন পরিচালনা করবে।

Question 5

আমাকে আমার প্রধান পাত্রে প্রস্থের সাথে খেলতে হয়েছিল:

html {
  @media only screen and (orientation: portrait) and (max-width: 555px) {
    transform: rotate(90deg);
    width: calc(155%);
    .content {
      width: calc(155%);
    }
  }
}