CSS3 100vh মোবাইল ব্রাউজারে স্থির নয়

Question

আমার একটি অত্যন্ত বিজোড় সমস্যা আছে ... প্রতিটি ব্রাউজার এবং মোবাইল সংস্করণে আমি এই আচরণটি সহ্য করেছি:

• আপনি পৃষ্ঠাটি লোড করার সময় সমস্ত ব্রাউজারের একটি শীর্ষ মেনু থাকে (উদাহরণস্বরূপ ঠিকানা বারটি দেখানো হয়) আপনি পৃষ্ঠাটি স্ক্রোল করা শুরু করার পরে কোন স্লাইড উপরে উঠে আসে।
• 100vh কখনও কখনও কেবল ভিউপোর্টের দৃশ্যমান অংশে গণনা করা হয়, সুতরাং যখন ব্রাউজার বার স্লাইড 100vh বৃদ্ধি পায় (পিক্সেলের শর্তে)
• সমস্ত লেআউট পুনরায় আঁকা এবং মাত্রাগুলি পরিবর্তিত হওয়ায় পুনরায় সমন্বয় করুন
• ব্যবহারকারীর অভিজ্ঞতার জন্য খারাপ ঝাপটায় প্রভাব

কীভাবে এই সমস্যা এড়ানো যায়? যখন আমি প্রথম ভিউপোর্ট-উচ্চতার কথা শুনেছি আমি উত্তেজিত হয়ে গিয়েছিলাম এবং আমি ভেবেছিলাম জাভাস্ক্রিপ্ট ব্যবহার না করে স্থির উচ্চতা ব্লকগুলির জন্য এটি ব্যবহার করতে পারব, তবে এখন আমি মনে করি এটি করার একমাত্র উপায় হ'ল কিছুটা আকার পরিবর্তন করার ইভেন্ট সহ জাভাস্ক্রিপ্ট ...

আপনি এখানে সমস্যাটি দেখতে পারেন: নমুনা সাইট

সিএসএস সমাধান সম্পর্কে কেউ আমাকে সহায়তা করতে / পরামর্শ দিতে পারেন?

---

সাধারণ পরীক্ষার কোড:

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Comments

যদি আমি প্রশ্নটি ভালভাবে বুঝতে পারি তবে আপনি যে সমস্যাটির মুখোমুখি হচ্ছেন তা মোবাইল ব্রাউজারে উচ্চতা দৃশ্যমান ভিউপোর্টের চেয়ে আরও বেশি হবে ঠিক?

— গৌরব আগরওয়াল

আকর্ষণীয়, এর আগে কখনও খেয়াল করেননি। এটি প্রধানত পটভূমি চিত্র যা লক্ষণীয়ভাবে ঝাপটায়। transition: 0.5sপরিবর্তনটি হঠাৎ করে কমিয়ে আনতে কীভাবে আপনি একটি বা আরও যুক্ত করবেন ?

— সি

@ গৌরব আগগরওয়াল ঠিক নেই, বিপরীতে: সত্যিকারের ভিউপোর্টের উচ্চতা ব্রাউজারের দেওয়া বারের চেয়ে বেশি যখন তার ঠিকানা দণ্ডটি দৃশ্যমান হয় ...

— নেরিও কাস্টাকুর্টা

যেহেতু আমার প্রশ্নটি জনপ্রিয় হয়ে উঠছে, আমি আমার 5 সেন্ট দিতে চাই: আসল উইন্ডো উচ্চতাটি মেন্টেন করা এবং কেবল মেনু বারটি স্লাইড করতে আরও বুদ্ধিমান হবে না? এটা এত কঠিন বলে মনে হচ্ছে না। প্রকৃতপক্ষে সহজ হওয়া উচিত ... আঙুল আপ -> মেনু বার অদৃশ্য হওয়া অবধি স্লাইড উপরে, আঙুল নীচে -> মেনু বার স্লাইডটি সম্পূর্ণ দৃশ্যমান হওয়া অবধি ... সমস্ত মিলিয়ে কোনওরকম পুনঃ-সামঞ্জস্য এবং ঝাপটায় প্রভাব ছাড়াই ...

— নেরিও কস্টাকুরতা

গুগলের এ সম্পর্কে কিছু ভাল তথ্য রয়েছে: developers.google.com/web/updates/2016/12/url-bar-resizing আপনি যদি 100vh এর পরিবর্তে 100% ব্যবহার করতে পারেন যদি আপনি শরীরের উচ্চতা 100% এ পরিবর্তন করেন

— বেনিসবার্গার

Answer 1

দুর্ভাগ্যক্রমে এটি ইচ্ছাকৃত ...

এটি একটি সুপরিচিত সমস্যা (কমপক্ষে সাফারি মোবাইলে), যা ইচ্ছাকৃত, কারণ এটি অন্যান্য সমস্যাগুলি প্রতিরোধ করে। বেঞ্জামিন পলাইন একটি ওয়েবকিট বাগে জবাব দিয়েছে :

এটি সম্পূর্ণ ইচ্ছাকৃত। এই প্রভাবটি অর্জন করতে আমাদের পক্ষ থেকে এটি বেশ খানিকটা সময় নিয়েছিল। :)

বেস সমস্যাটি হ'ল: আপনি স্ক্রোল করার সাথে সাথে দৃশ্যমান অঞ্চলটি পরিবর্তনশীল হয়। আমরা যদি সেই অনুযায়ী সিএসএস ভিউপোর্ট উচ্চতা আপডেট করি তবে আমাদের স্ক্রোল চলাকালীন লেআউটটি আপডেট করতে হবে। এটি কেবল ছিটে যাওয়ার মতোই নয়, তবে 60 পৃষ্ঠাগুলিতে এটি করা বেশিরভাগ পৃষ্ঠায় কার্যত অসম্ভব (60 এফপিএস আইওএসের বেসলাইন ফ্রেমরেট) rate

আপনাকে "বিষ্ঠের মতো দেখায়" অংশটি দেখানো শক্ত, তবে আপনি যখন স্ক্রোল করবেন তখন বিষয়বস্তুগুলি সরানো হয়েছে এবং আপনি পর্দায় যা চান তা ক্রমাগত বদলে যাচ্ছে imagine

গতিশীলভাবে উচ্চতা আপডেট করা কাজ করছে না, আমাদের কয়েকটি পছন্দ ছিল: আইওএসের উপরে ভিউপোর্ট ইউনিটগুলি ফেলে দিন, আইওএস 8 এর আগে নথির আকারের সাথে মেলে, ছোট দৃশ্যের আকার ব্যবহার করুন, বড় আকারের আকার ব্যবহার করুন।

আমাদের কাছে থাকা ডেটা থেকে, বৃহত্তর দর্শন আকারটি ব্যবহার করা ছিল সেরা আপোস। বেশিরভাগ ওয়েবসাইট ভিউপোর্ট ইউনিট ব্যবহার করে বেশিরভাগ সময় দুর্দান্ত দেখাচ্ছিল।

নিকোলাস হোইজে এ সম্পর্কে কিছুটা গবেষণা করেছেন: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-docament-in-some-momot -browsers.html

কোনও স্থির পরিকল্পনা নেই

এই মুহুর্তে, মোবাইল ডিভাইসগুলিতে ভিউপোর্টের উচ্চতা ব্যবহার করা থেকে বিরত থাকা ছাড়া আপনি আরও কিছু করতে পারবেন না। ২০১ Chrome সালেও ক্রোম এতে পরিবর্তন হয়েছিল:

• https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
• https://developers.google.com/web/updates/2016/12/url-bar-resizing

Comments

হ্যাঁ, আমি যেমন মনে করি। কেবলমাত্র টেকসই সমাধান হ'ল একটি স্ক্রিপ্টযুক্ত সমাধান। আমি যা জানি তা থেকে $(window).height()এই বাগ দ্বারা প্রভাবিত হয় না, তাই আমি সেদিকে যাব। ধন্যবাদ!

— নেরিও কোস্টাকুর্টা

স্ক্রিপ্ট আমার জন্য একমাত্র উপায় ছিল এবং পুরোপুরি কাজ করেছিল।

— ক্যাপডডাইলাইট

সবচেয়ে হতাশাজনক উত্তর।

— Winnemucca

যেহেতু ক্রোম সংস্করণ 56 টি vh সর্বদা গণনা করা হয় যেন ইউআরএল বারটি লুকানো থাকে এবং তাই vh ছাড়া স্ক্রোলটিতে বৃদ্ধি হয় না position:fixed। এটি সাফারি বাস্তবায়নের অনুরূপ। আরও পড়ুন: developers.google.com/web/updates/2016/12/url-bar-resizing

— কেভিন ফারুগিয়া

প্রাথমিক লোডের পরে সর্বশেষতম ক্রোম পরিবর্তন হয় না vhবা <html> 100%উচ্চতা হয় না । এটি প্রকৃতপক্ষে দুর্দান্ত - যখন ইউআরএল বারের আড়ালগুলি ভয়ঙ্কর দেখাতে পারে তখন লেআউট থ্র্যাশিং / রিফ্লো হিসাবে। Firefoxএবং Edge Mobileএখনও ডায়নামিকভাবে আপডেট vhএবং <html>উচ্চতা, স্ক্রোল করার সময় প্রচুর ছেঁড়া এবং পুনরায় আকার দেওয়ার কারণ ঘটায় বিশেষত খারাপ যদি ব্যাকগ্রাউন্ড চিত্রগুলির জন্য এসভিজি ব্যবহার করে

— ড্রেনাই

Answer 2

আপনি এর min-height: -webkit-fill-available;পরিবর্তে আপনার সিএসএসে চেষ্টা করতে পারেন 100vh। এটি সমাধান করা উচিত

Comments

আমি min-height: 100vh;ফ্যালব্যাক হিসাবে চলে যাব যেখানে -webkit-fill-availableসমর্থিত নয়।

— টেমি টি

ওহ! ধন্যবাদ!! এটির সাথে আমার আর "বিক্রিয়া-ডিভ-100vh" দরকার নেই!

— আন্দ্রেস এলিজন্ডো

সবচেয়ে সহায়ক উত্তর!

— গৌথির

@ ট্যামিটাই ঠিক আছে, সেখানে রাখাই ভাল min-height: 100vh;কারণ এটি ফায়ারফক্সের মতো ব্রাউজারগুলিকে ভেঙে ফেলবে (কমপক্ষে ডেস্কটপে আইওএস যাই হোক না কেন ব্রাউজারেই ওয়েবকিট ব্যবহার করে)।

— JoniVR

এটি খুব সুন্দর সমাধান ছিল, তবে মনে হচ্ছে আইওএস ১৩-এ পরিবর্তিত হয়েছে - আমি প্রথম বিভাগের নীচে অতিরিক্ত স্থান দেখছি, তবে এটি আইওএস 12.x কোডেপেন.আইও / রআরএলএলএফের জন্য সাফারিতে পছন্দসইভাবে কাজ করে / PowjvPq (আসলে আপনি কী বলতে চাইছেন তা দেখার জন্য আপনাকে এটি কাঁটাচামচা করতে হবে তবে আইওএসের কোডপেন ডিবাগ মোডে এটি দেখতে হবে)।

— www.www

Answer 3

আমার অ্যাপ্লিকেশনটিতে আমি এটি পছন্দ করি (টাইপস্ক্রিপ্ট এবং নেস্টেড পোস্টক্যাস, সুতরাং সেই অনুযায়ী কোডটি পরিবর্তন করুন):

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

আপনার সিএসএসে:

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}

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

ডেমো

Comments

এটি আসলে খুব বিরক্তিকর সমস্যাটির জন্য দুর্দান্ত দৃষ্টিভঙ্গি।

— মাইকেল জিওভান্নি পমো

আমি একটি সতর্কতা যুক্ত করতে চাই যে "@ মিডিয়া সমস্ত নয় এবং (হোভার: হোভার) mobile" মোবাইল ব্রাউজারগুলি সনাক্ত করার জন্য বুলেটপ্রুফ উপায় নয়। অন্য কিছু ব্যবহার করতে নির্দ্বিধায়।

— Andreas হার্ড

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

— জ্যাচ গলউইজিটর

Answer 4

আমি ক্লায়েন্টটি তৈরি করি এমন অনেক সাইটের জন্য 100vh ব্যানার জিজ্ঞাসা করা হবে এবং যেমনটি আপনি পেয়েছেন, এটি যখন আপনি স্ক্রোল করা শুরু করবেন তখন এটি মোবাইলে খারাপ "ঝাঁপিয়ে পড়া" অভিজ্ঞতা লাভ করে। সমস্ত ডিভাইস জুড়ে মসৃণ ধারাবাহিক অভিজ্ঞতার জন্য আমি এইভাবে সমস্যাটি সমাধান করি:

আমি প্রথমে আমার ব্যানার উপাদান সিএসএস এ সেট করেছি height:100vh

তারপরে আমি আমার ব্যানার উপাদানটির পিক্সেলগুলিতে উচ্চতা পেতে jQuery ব্যবহার করি এবং এই উচ্চতাটি ব্যবহার করে একটি ইনলাইন স্টাইল প্রয়োগ করি।

var viewportHeight = $('.banner').outerHeight();
$('.banner').css({ height: viewportHeight });

এটি করার ফলে মোবাইল ডিভাইসগুলিতে সমস্যাটি সমাধান হয়ে যায় যেমন পৃষ্ঠাটি লোড হয়ে যায়, ব্যানার উপাদানটি CSS ব্যবহার করে 100vh এ সেট করা থাকে এবং তারপরে jQuery আমার ব্যানার উপাদানটিতে ইনলাইন সিএসএস স্থাপন করে এটি ওভাররাইড করে যা কোনও ব্যবহারকারী যখন স্ক্রোল করা শুরু করে তখন এটি পুনরায় আকার দেওয়া থেকে বিরত থাকে।

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

if ($('body').hasClass('mobile')) {
  var viewportHeight = $('.banner').outerHeight();
  $('.banner').css({ height: viewportHeight });
}

ফলস্বরূপ, কোনও ব্যবহারকারী যদি কোনও মোবাইল ডিভাইসে থাকে তবে 'মোবাইল' ক্লাসটি আমার পৃষ্ঠার শরীরে উপস্থিত থাকে এবং উপরের জিক্যুরিটি কার্যকর করা হয়। সুতরাং আমার ব্যানার উপাদানটি কেবলমাত্র ডেস্কটপে মোবাইল ডিভাইসগুলিতে ইনলাইন সিএসএস প্রয়োগ করবে মূল 100vh সিএসএস বিধিটি স্থানে রয়েছে remains

Comments

$('.banner').css({ height: window.innerHeight });পরিবর্তে আমি এটি ব্যবহার করার জন্য টুইট করব, যা ভিউপোর্টের "আসল" উচ্চতা। ইনারহাইট কীভাবে কাজ করে তার উদাহরণ

— মার্টিন

যা document.querySelector('.banner').style.height = window.innerHeight;প্রকৃত জাভাস্ক্রিপ্ট লেখার লোকদের জন্য।

— ফ্যাবিয়ান ভন এলার্টস

Answer 5

এই উত্তরটি দেখুন: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

body {
  background-color: #333;
}

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>

Comments

চতুর সমাধান, আমি মোবাইল ডিভাইসে ভিউপোর্টের উচ্চতা নিয়ে সমস্যার মুখোমুখি হয়েছি, এটিও সমাধান হিসাবে গ্রহণ করা উচিত (বিশেষত মোবাইল ডিভাইসগুলির জন্য)

— জুলিও বেদোভাত্তো

খুব সুন্দর সমাধান। কেবলমাত্র আমার ক্ষেত্রে, আমি পনিফিল ব্যবহার করি নি, বরং যুক্তি দিয়ে বলছি যে সমস্ত ডেস্কটপ সাইটগুলির জন্য আমি 100vh ব্যবহার করি, যখন মোবাইলের জন্য আমি ভার ব্যবহার করি (মোবাইল ওয়ার্ল্ডে আমাদের কাছে আই 11 নেই)।

— ফ্রিএইচএমএইচ

কেবল সমাধান যা নেস্টেড উপাদানগুলির জন্য কাজ করেছিল। অন্য কারও কাছে কয়েক শতাধিক দৃষ্টান্ত প্রতিস্থাপন করতে হবে, আপনি (কমপক্ষে বেশিরভাগ সময়) রিজেক্সপ (-)? ([\ D।] +) Vh এর সাথে মিলিয়ে ক্যালকের (var (- vh) * দিয়ে প্রতিস্থাপন করতে পারেন * $ 1 $ 2)

— ecc521

Answer 6

আমি একটি প্রতিক্রিয়া উপাদান নিয়ে এসেছি - আপনি প্রতিক্রিয়া ব্যবহার করেন বা উত্স কোডটি ব্রাউজ করেন কিনা তা পরীক্ষা করে দেখুন যদি না করেন তবে , যাতে আপনি এটি আপনার পরিবেশের সাথে মানিয়ে নিতে পারেন।

এটি পূর্ণস্ক্রিন ডিভের উচ্চতা এতে সেট করে window.innerHeightএবং তারপরে উইন্ডো আকারে এটি আপডেট করে।

Comments

সব নায়ক ক্যাপ পরেন না। আপনি ঠিক আছে যেমন। আপনাকে অনেক ধন্যবাদ. সময় ঘন্টা বাঁচানো।

— নারায়ণএন

এবং ভ্যু

— টনি

Answer 7

যেহেতু আমি কিছু দিন সমাধানের সন্ধান করছিলাম, ভুটিফাইয়ের সাথে ভ্যুজেএস ব্যবহার করা প্রত্যেকের জন্য আমার এখানে রয়েছে (আমার সমাধানটি ভি-অ্যাপ-বার, ভি-নেভিগেশন-ড্রয়ার এবং ভি-ফুটার ব্যবহার করে): আমি অ্যাপ.এসএসএস তৈরি করেছি (অ্যাপটিতে ব্যবহৃত হয়েছে)। নিম্নলিখিত বিষয়বস্তু সহ: মান)

.v-application {
    height: 100vh;
    height: -webkit-fill-available;
}

.v-application--wrap {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
}

Comments

এটি ভালভাবে কাজ করে এবং ভ্যু / ভুটিফাই বিশ্বের বাইরে সাধারণীকরণ করা যায়।

— লিও

Answer 8

আমার জন্য এ জাতীয় কৌশল একটি কাজ করেছে:

height: calc(100vh - calc(100vh - 100%))

Comments

এটি কি উচ্চতার চেয়ে আলাদা: 100%?

— এফএফ_দেব

হ্যাঁ, 100 ভিএইচ ভিউপোর্টের উচ্চতা (আপনার ডিভাইস) এর 100%, যখন খাঁটি 100% কেবলমাত্র সমস্ত উপলব্ধ প্যারেন্ট অঞ্চল পূরণ করে (প্যারেন্ট ব্লকের মধ্যে উদাহরণস্বরূপ 50px উচ্চতা থাকতে পারে এবং এটি কেবল এই প্যারেন্ট উচ্চতায় পূরণ করবে)। বড় সংক্ষেপে।

— প্যাট্রিক জনিক

Answer 9

@ নিলস এটি পরিষ্কারভাবে ব্যাখ্যা করেছেন।

এরপরে আর কি?

আমি কেবল CSS এ আপেক্ষিক 'ক্লাসিক' %(শতাংশ) ব্যবহার করতে ফিরে গিয়েছিলাম ।

এটি ব্যবহার করার চেয়ে কিছু কার্যকর করার জন্য প্রায়শই বেশি চেষ্টা করা হয় vhতবে কমপক্ষে আপনার কাছে একটি স্থিতিশীল সমাধান রয়েছে যা অজানা UI গ্লিটস ছাড়াই বিভিন্ন ডিভাইস এবং ব্রাউজারগুলিতে কাজ করে।

Comments

উচ্চতা: ব্যানারগুলির জন্য 100% এখনও মোবাইল ব্রাউজারগুলিতে ঝাঁপ দেয়। আমি এটি অ্যান্ড্রয়েডে পরীক্ষা করে দেখছি, এবং এখনও পর্যন্ত ক্রোম এবং অপেরা মিনি দৃশ্যমান ভিপি হিসাবে উচ্চতা হিসাবে 100% দেয় এবং স্ক্রোলটিতে পরিবর্তন হয় না। এজ এবং ফায়ারফক্স 100% উচ্চতা পরিবর্তন করে এবং ভিউটি পুনরায় রঙ করে। ফায়ারফক্স খুব খারাপ, টিয়ারিং, টেক্সট রেন্ডারিং সহ, খুব স্পষ্টতই পুনঃ-লেআউট

— ড্রেনাই

@ ড্রেনাই আপনি কি নিশ্চিত যে আপনি এটি সঠিকভাবে প্রয়োগ করেছেন? আপনি কি প্রমাণ করতে পারেন jsfiddle.net বা একটি ছোট উদাহরণে?

— ক্লিমাট

হ্যাঁ, আমি নিশ্চিত :-)

— ড্রেনাই

Answer 10

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

আমি জানি না কিনা আমি যে নিবন্ধ এখানে থেকে কোড শেয়ার করতে পারেন, কিন্তু ঠিকানা এই হল: http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

নিবন্ধটি উদ্ধৃত করে: "আইফোন এবং আইপ্যাড রেজোলিউশনের পুরানো সংস্করণগুলিকে লক্ষ্য করে এমন মিডিয়া ক্যোয়ারী ব্যবহার করে ডিভাইসের উচ্চতার সাথে কেবলমাত্র উপাদানটির উচ্চতার সাথে মেলে" "

পূর্ণ উচ্চতার উপাদানগুলিকে মানিয়ে নিতে তারা মাত্র 6 টি মিডিয়া ক্যোয়ারী যুক্ত করেছে এবং এটি পুরোপুরি CSS বাস্তবায়িত হওয়ায় এটি কাজ করা উচিত।

মুলতুবি সম্পাদনা করুন: আমি এখনই এটি পরীক্ষা করতে অক্ষম, তবে আমি ফিরে এসে আমার ফলাফলগুলি রিপোর্ট করব।

Comments

এখনও সেই ফলাফলগুলির জন্য অপেক্ষা করছি

— g

আমি দুঃখিত আমি প্রতিশ্রুতি মত ফিরে আসেনি। তবে এইচটিএমএল এবং সিএসএসের সাথে আমার পছন্দের তুলনায় দীর্ঘ সময়ের জন্য ফিড করার পরে আমি আমার লেআউটটির নকশাটি পরিবর্তন করেছি এবং এমন একটি উপায় খুঁজে পেয়েছি যা আমার প্রয়োজনের জন্য "ঠিক আছে" কাজ করেছিল, তবে এটি সর্বজনীন সমাধান ছিল না।

— জাহাজিল

Answer 11

আমি যেমন নতুন, আমি অন্য উত্তরে মন্তব্য করতে পারি না।

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

প্রথমত, ডিভাইসটি স্পর্শ করে বা হোভার হয় কিনা তা সনাক্ত করতে আমি একটি স্ক্রিপ্ট ব্যবহার করি। বেয়ার হাড়ের উদাহরণ:

if ("ontouchstart" in document.documentElement) {
    document.body.classList.add('touch-device');

} else {
    document.body.classList.add('hover-device');
}

এটি উচ্চতা স্ক্রিপ্টের জন্য পরে ব্যবহার করা যেতে পারে এমন ডিভাইসের ধরণ (হোভার বা স্পর্শ) অনুযায়ী শরীরের উপাদানগুলিতে ক্লাস যুক্ত করে।

- পরবর্তী লোড এবং ওরিয়েন্টেশন পরিবর্তনে ডিভাইসের উচ্চতা নির্ধারণ করতে এই কোডটি ব্যবহার করুন:

if (jQuery('body').hasClass("touch-device")) {
//Loading height on touch-device
    function calcFullHeight() {
        jQuery('.hero-section').css("height", $(window).height());
    }

    (function($) {
        calcFullHeight();

        jQuery(window).on('orientationchange', function() {
            // 500ms timeout for getting the correct height after orientation change
            setTimeout(function() {
                calcFullHeight();
            }, 500);

        });
    })(jQuery);

} else {
    jQuery('.hero-section').css("height", "100vh");


}

-Timeout সেট করা হয়েছে যাতে ডিভাইসটি ওরিয়েন্টেশন পরিবর্তনে সঠিকভাবে নতুন উচ্চতা গণনা করবে। যদি সময়সীমা না থাকে তবে আমার অভিজ্ঞতায় উচ্চতাটি সঠিক হবে না। 500ms একটি অতিরিক্ত পরিমাণে হতে পারে তবে আমার জন্য কাজ করেছে।

হোভার-ডিভাইসগুলিতে -100vh ফ্যালব্যাক হয় যদি ব্রাউজারটি সিএসএস 100vh কে ওভাররাইড করে।

Comments

সমস্ত ব্রাউজারে টাচস্টার্ট সমর্থিত নয়, এবং কিছু অ-মোবাইল ডিভাইসগুলির এটি বিকাশকারী রয়েছে

— ড্রেনাই

@ ড্রেনাই টাচস্টার্ট বেশিরভাগ মোবাইল ব্রাউজারে সমর্থিত। ডেস্কটপে সমর্থনটি কিছুটা কম, আইই, অপেরা এবং সাফারি সমর্থন করছে না। তবে মূল প্রশ্নটি ডেস্কটপ নয়, মোবাইলকে লক্ষ্য করে। যা এটিকে বৈধ উত্তর দেয়।

— পল

মন্তব্যের জন্য ধন্যবাদ! কিছু মোবাইল ব্রাউজারে পর্দার পুনরায় সামঞ্জস্যতা এবং লাফিয়ে উঠতে আমি মূলত এই কৌশলগুলি ব্যবহার করেছি। ব্রাউজারটি টাচস্টার্ট সমর্থন না করলে ফ্যালব্যাক CSS 100vh হবে - যদি 100 ভিএইচ সমর্থন না করে তবে এটি ভিন্ন বিষয়। যদি ডেস্কটপ ডিভাইসে স্পর্শ সমর্থন পাওয়া যায় তবে জাভাস্ক্রিপ্ট দিয়ে উচ্চতা গণনা করা হবে। এরপরে আমরা 100vh সরবরাহিত পুনরায় আকারের পুনরায় গণনাটি হারাব, তবে ডেস্কটপে ওরিয়েন্টেশন পরিবর্তন হয়নি বলে এটি সাধারণভাবে মারাত্মক সমস্যা নয়।

— tjgoodman

এছাড়াও, উচ্চতা গণনাটিকে পুনরায় আকার দেওয়ার ইভেন্টের সাথেও সংযুক্ত করা যেতে পারে তবে তারপরে আমরা মোবাইল ডিভাইসগুলিতে পুনরায় সামঞ্জস্য করা এবং লাফিয়ে ফেলার একই একই সমস্যাটিতে যেতে পারি। অতএব, আমি এই কৌশলগুলি ব্যবহারিক বলে মনে করেছি।

— tjgoodman

@ পল যদি ক্রোম এবং ফায়ারফক্স ডেস্কটপ ব্রাউজারগুলির টাচস্টার্ট থাকে, তবে অবশ্যই মোবাইল ব্রাউজার সনাক্ত করার জন্য এটি ভুল বৈশিষ্ট্যটি ব্যবহার করা উচিত? আমি কেবল এটি উইন্ডোজের ক্রোম এবং ফায়ারফক্সে পরীক্ষা করেছি এবং দু'জনেই এই পরীক্ষাটি পাস করেছে

— ড্রেনাই

Answer 12

নিম্নলিখিত কোডটি সমস্যার সমাধান করেছে (jQuery সহ)।

var vhHeight = $("body").height();
var chromeNavbarHeight = vhHeight - window.innerHeight;
$('body').css({ height: window.innerHeight, marginTop: chromeNavbarHeight });

এবং অন্যান্য উপাদানগুলি %প্রতিস্থাপনের জন্য ইউনিট হিসাবে ব্যবহার করে vh।

Answer 13

আমি আমার প্রতিক্রিয়া অ্যাপ্লিকেশনটির জন্য প্রায় কাজ করেছি।

আইফোন 11 প্রো এবং আইফোন প্রো সর্বোচ্চ - 120px p

আইফোন 8 - 80px

max-height: calc(100vh - 120px);

এটি একটি আপস কিন্তু তুলনামূলক সহজ সমাধান

Answer 14

নিম্নলিখিত আমার জন্য কাজ করেছে:

html { height: 100vh; }

body {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
}

/* this is the container you want to take the visible viewport  */
/* make sure this is top-level in body */
#your-app-container {
  height: 100%;
}

bodyপ্রোফাইল ভিউপোর্ট উচ্চতা নেবে এবং #your-app-containerসঙ্গে height: 100%যে ধারক প্রোফাইল ভিউপোর্ট উচ্চতা নিতে হবে।

Answer 15

আশা করা যায়, এখানে পরামর্শ হিসাবে এটি ইউএ-সংজ্ঞায়িত সিএসএস এনভায়রনমেন্ট ভেরিয়েবল হবে: https://github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046

Answer 16

কারণ এটি স্থির হবে না, আপনি এর মতো কিছু করতে পারেন:

# html
<body>
  <div class="content">
    <!-- Your stuff here -->
  </div>
</body>

# css
.content {
  height: 80vh;
}

আমার জন্য এটি জাভাস্ক্রিপ্টের সাথে খেলার চেয়ে দ্রুত এবং আরও বিশুদ্ধ সমাধান যা অনেকগুলি ডিভাইস এবং ব্রাউজারগুলিতে কাজ করতে পারেনি।

vhআপনার প্রয়োজন অনুসারে উপযুক্ত মানটি ব্যবহার করুন।

Answer 17

মোবাইল ডিভাইসে ভিএইচ ব্যবহার করা 100vh এর সাথে কাজ করে না, কারণ তাদের নকশা পছন্দগুলি ডিভাইসের পুরো উচ্চতা ব্যবহার করে কোনও ঠিকানা বার ইত্যাদি অন্তর্ভুক্ত করে না choices

আপনি যদি সত্য ভিউ উচ্চতার সমানুপাতিক ডিভ হাইট সহ একটি লেআউট সন্ধান করছেন তবে আমি নিম্নলিখিত খাঁটি সিএসএস সমাধানটি ব্যবহার করি:

:root {
  --devHeight: 86vh; //*This value changes
}

.div{
    height: calc(var(--devHeight)*0.10); //change multiplier to suit required height
}

ভিউপোর্টের উচ্চতা নির্ধারণ করার জন্য আপনার কাছে দুটি বিকল্প রয়েছে, ম্যানুয়ালি - দেবদেহাইটটি এমন উচ্চতায় সেট করুন যা কাজ করে (তবে আপনি কোডিং করছেন এমন প্রতিটি ধরণের ডিভাইসের জন্য আপনাকে এই মানটি প্রবেশ করতে হবে)

অথবা

উইন্ডোটির উচ্চতা পেতে জাভাস্ক্রিপ্ট ব্যবহার করুন এবং তারপরে আপডেট করুন - ভিউপোর্টটি লোড করা এবং রিফ্রেশ করার উপর দেওয়াইট (তবে এটি জাভাস্ক্রিপ্ট ব্যবহারের প্রয়োজন এবং এটি কোনও খাঁটি CSS সমাধান নয়)

একবার আপনি যখন আপনার সঠিক দর্শন উচ্চতা অর্জন করেন তখন আপনি প্রতিটি ডিভের গুণককে কেবল উচ্চতায় নির্ধারণ করে মোট ভিউপোর্ট উচ্চতার সঠিক শতাংশে একাধিক ডিভ তৈরি করতে পারেন।

0.10 = 10% দর্শন উচ্চতার 0.5% = দেখার উচ্চতার 57%

আশা করি এটি কারও সহায়ক হতে পারে;)

Comments

এটি একটি দুর্দান্ত সমাধান। আপনি এই সম্পর্কে আরএসএস-কৌশল সম্পর্কে এই নিবন্ধটিতে আরও পড়তে পারেন ।

— অ্যামাউরি হ্যান্সার

Answer 18

আপনি নিম্নলিখিত স্ক্রিপ্ট এবং শৈলী যুক্ত করে এটি করতে পারেন

  function appHeight() {
    const doc = document.documentElement
    doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px');
  }
  window.addEventListener('resize', appHeight);
  appHeight();

শৈলী

.module {
 height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

Answer 19

html, body { height: 100% }মোবাইল ডিভাইসে 100vh এর প্রভাবের জন্য কিছু চেষ্টা করুন Try

Answer 20

আপনি আপনার ধারককে position: fixed; top: 0; bottom: 0;সম্পত্তি দেওয়ার চেষ্টা করতে পারেন ।

Comments

এটি কেন প্রশ্নের উত্তর তা সম্পর্কে আরও তথ্য যুক্ত করুন।

— সংক্রামিত ড্রাক