ঠিকানা বারটি আইওএস / অ্যান্ড্রয়েড / মোবাইল ক্রোমগুলি লুকিয়ে রাখলে পটভূমির চিত্রটি লাফ দেয়

Question

আমি বর্তমানে টুইটার বুটস্ট্র্যাপ ব্যবহার করে একটি প্রতিক্রিয়াশীল সাইট বিকাশ করছি।

সাইটের মোবাইল / ট্যাবলেট / ডেস্কটপ জুড়ে একটি সম্পূর্ণ পর্দার পটভূমি চিত্র রয়েছে। এই চিত্রগুলি দুটি ডিভ ব্যবহার করে প্রতিটি ঘোরান এবং বিবর্ণ হয়।

এটি একটি সমস্যা বাদে প্রায় নিখুঁত। আইওএস সাফারি, অ্যান্ড্রয়েড ব্রাউজার বা অ্যান্ড্রয়েডে ক্রোম ব্যবহার করে পটভূমিতে কিছুটা লাফ দেয় যখন কোনও ব্যবহারকারী পৃষ্ঠার নিচে স্ক্রল করে এবং ঠিকানা বারটি আড়াল করে।

সাইটটি এখানে: http://lt2.daveclarke.me/

এটি একটি মোবাইল ডিভাইসে দেখুন এবং নীচে স্ক্রোল করুন এবং আপনার চিত্রের আকার পরিবর্তন / সরানো উচিত।

ডিআইভি ব্যাকগ্রাউন্ডের জন্য আমি কোডটি ব্যবহার করছি:

#bg1 {
    background-color: #3d3d3f;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; position:fixed;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    z-index:-1;
    display:none;
}

সমস্ত পরামর্শ স্বাগত - এটি একটি সময় জন্য আমার মাথা কাজ করে চলেছে !!

Comments

আপনার লিঙ্কে লেখক প্রয়োজন ... এছাড়াও, কিছু কোড pls আমাদের দেখান!

— শন টেলর 16

নতুন লিঙ্কটি ব্যাকগ্রাউন্ড পজিশনিং ইত্যাদির জন্য কোড দেখানো হয়েছে ইত্যাদি

— ডেভ ক্লার্ক

আপনি যদি এই সমস্যাটি অনুভব করে থাকেন তবে আপনি বিকাশকারীদের / ডাব্লু / আপডেটস / ২০১/ / ১২ / ইউআরএল-বার-রিসাইজ করতে পারেন । এই সমস্যাটি এখন (ধরণের) মোকাবেলা করা হয়েছে, তবে এখনও রয়েছে এমন উপাদানগুলিকে প্রভাবিত করে position: fixed।

— অ্যাডাম রেইস

@ অ্যাডাম রিস অবশেষে! পোস্ট করার জন্য ধন্যবাদ

— ডেভ ক্লার্ক

Answer 1

এই সমস্যাটি ইউআরএল বারগুলি সঙ্কুচিত / পথ থেকে স্লাইড হয়ে যাওয়া এবং # বিজি 1 এবং # বিজি 2 ডিভের আকার পরিবর্তন করার কারণে হ'ল 100% উচ্চতা এবং "স্থির"। যেহেতু ব্যাকগ্রাউন্ড চিত্রটি "কভার" এ সেট করা আছে এটি যুক্ত ক্ষেত্রটি বৃহত্তর হওয়ায় এটি চিত্রের আকার / অবস্থানটি সামঞ্জস্য করবে।

সাইটের প্রতিক্রিয়াশীল প্রকৃতির উপর ভিত্তি করে, পটভূমি অবশ্যই স্কেল করতে হবে। আমি দুটি সম্ভাব্য সমাধান বিনোদন দিয়েছি:

1) # বিজি 1, # বিজি 2 উচ্চতা 100vh এ সেট করুন। তত্ত্বগতভাবে, এটি একটি মার্জিত সমাধান। তবে, আইওএস-এর একটি vh বাগ রয়েছে ( http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/ )। সমস্যাটি রোধ করার জন্য আমি সর্বোচ্চ-উচ্চতা ব্যবহার করার চেষ্টা করেছি, তবে তা থেকে যায়।

2) জাভাস্ক্রিপ্ট দ্বারা নির্ধারিত হলে ভিউপোর্টের আকারটি ইউআরএল বার দ্বারা প্রভাবিত হয় না। সুতরাং, জাভাস্ক্রিপ্টটি ভিউপোর্টের আকারের উপর ভিত্তি করে # বিজি 1 এবং # বিজি 2 এ স্থিতিশীল উচ্চতা নির্ধারণ করতে ব্যবহার করা যেতে পারে। এটি সর্বোত্তম সমাধান নয় কারণ এটি খাঁটি সিএসএস নয় এবং পৃষ্ঠা লোডে একটি সামান্য চিত্রের ঝাঁপ রয়েছে। তবে এটিই কেবলমাত্র কার্যকর সমাধান যা আমি আইওএসের "ভিএইচ" বাগগুলি বিবেচনা করে দেখছি (যা আইওএস 7 এ স্থির বলে মনে হয় না)।

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

পার্শ্ব নোটে, আমি iOS এবং অ্যান্ড্রয়েডে এই আকারগুলির URL বারগুলির সাথে অনেকগুলি সমস্যা দেখেছি। আমি উদ্দেশ্যটি বুঝতে পেরেছি, তবে তাদের ওয়েবসাইটগুলিতে যে অদ্ভুত কার্যকারিতা এবং বিপর্যয় রয়েছে সেগুলির মধ্যে তাদের সত্যই চিন্তা করা দরকার। সর্বশেষতম পরিবর্তনটি, আপনি কি আর স্ক্রোল ট্রিকস ব্যবহার করে আইওএস বা ক্রোমে পৃষ্ঠা লোডের URL বারটি "আড়াল" করতে পারবেন না।

সম্পাদনা করুন: উপরের স্ক্রিপ্টটি ব্যাকগ্রাউন্ডটিকে আকার পরিবর্তন থেকে বাঁচানোর জন্য পুরোপুরি কার্যকরভাবে কাজ করে, ব্যবহারকারীরা যখন স্ক্রল করে তখন এটি একটি লক্ষণীয় ব্যবধান সৃষ্টি করে। কারণ এটি ইউআরএল বারের থেকে পর্দার উচ্চতা মাইনাসের 100% এ মাপসই রাখছে keeping যদি আমরা উচ্চতাতে 60px যুক্ত করি তবে সুইস প্রস্তাব দেয়, এই সমস্যাটি চলে যায়। এর অর্থ এই যে ইউআরএল বার উপস্থিত থাকাকালীন আমরা পটভূমির চিত্রের নীচের 60px দেখতে পাব না, তবে এটি ব্যবহারকারীদের কোনও ফাঁক দেখা থেকে বাধা দেয়।

function resizeBackground() {
    bg.height( $(window).height() + 60);
}

Comments

এর জন্য ধন্যবাদ. আমি আগামীকাল এটিকে ঘূর্ণি দেব এবং আপনাকে জানাব যে আমি কীভাবে যাচ্ছি :)

— ডেভ ক্লার্ক

এটা চমৎকার. আমি আপনার দ্বিতীয় সমাধানটি কার্যকর করেছি, যা ফুটার এবং পটভূমির চিত্রের মধ্যে কয়েকটি পিক্সেল ব্যবধানের সাথে প্রায় নিখুঁতভাবে কাজ করেছে। আমি আপনার কোডের 4 র্থ লাইনটি এতে পরিবর্তন করেছি: bg.height(jQuery(window).height() + 60);যা আমার সমস্ত ডিভাইস জুড়ে সুন্দরভাবে কাজ করে! ধন্যবাদ :)

— ডেভ ক্লার্ক

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

— সমস্যাগুলি

পুরো পৃষ্ঠার সামগ্রীটি bodyমোড়ক থেকে একটি মোড়ক পর্যন্ত পটভূমি সরিয়ে আমি এই সমস্যার সমাধান করতে সক্ষম হয়েছি <div>। আইওএস বা অ্যান্ড্রয়েডে কোনও জাম্পিং ব্যাকগ্রাউন্ড নেই!

— মারিয়াস শুল্জ

জেএস সমাধানটি আমার জন্য কাজ করছে না (অ্যান্ড্রয়েড)। নিশ্চিত হয়ে গেছে যে স্ক্রিপ্টটি উচ্চতা নির্ধারণ করছে, তবে সমস্যাটি অব্যাহত রয়েছে।

— jwinn

Answer 2

আমি দেখতে পেলাম জেসনের উত্তর আমার পক্ষে বেশ কার্যকর ছিল না এবং আমি তখনও লাফিয়ে যাচ্ছি। জাভাস্ক্রিপ্টটি নিশ্চিত করেছে যে পৃষ্ঠার শীর্ষে কোনও ফাঁক নেই তবে যখনই অ্যাড্রেস বার অদৃশ্য হয়ে গেছে বা আবার দেখা যাচ্ছে তখনও পটভূমিটি লাফিয়ে উঠছিল। জাভাস্ক্রিপ্ট ঠিক করার পাশাপাশি, আমি ডিভিতে আবেদন করেছি transition: height 999999s। এটি এতক্ষণ একটি সময়কালের সাথে একটি রূপান্তর তৈরি করে যা এটি কার্যত উপাদানটিকে হিমায়িত করে।

Comments

বক্সের আসল চিন্তাভাবনার জন্য আপনি স্যার +1 প্রাপ্য। দুর্ভাগ্যক্রমে এটি স্ক্রিন রোটেশনের কারণে সৃষ্ট উদাহরণগুলির সাথে কোনও স্ক্রিন আকার পরিবর্তনের সাথে ডিভ আকার সামঞ্জস্য করতে বাধা দেয়।

— tobik

সৃজনশীলতার জন্য +1! আপনি যদি ব্যবহার করেন vwবা vhparent পিতামাতার ধারকটির ভিতরে ফন্টের আকার সেট করতে পারেন তবে এটি আপাতত ইস্যু যৌগিক হিসাবে ব্যবহার করতে হবে ।

— ছিনতাই

@ টোবিক ০.৫ সেকেন্ড বা তাই রূপান্তরটি সেট করে ভিউপোর্টের পরিবর্তনের ফলে সৃষ্ট জাম্প হ্রাস করা এখনও সম্ভব

— বাইনারিফ্যান্ট

এখনই ফোনটি ঘোরানোর চেষ্টা করুন

— চুডলিচেক

@ টোবিক এটি আসলে এটি বাগের চেয়ে বৈশিষ্ট্যযুক্ত করে তোলে;) ভাল চিন্তাভাবনা

— ডিমিট্রিহ

Answer 3

আমি আমাদের ওয়েবসাইটের একটি শিরোনামে অনুরূপ সমস্যা পেয়েছি।

html, body {
    height:100%;
}
.header {
    height:100%;
}

এটি অ্যান্ড্রয়েড ক্রোমের উপর ঝাঁপিয়ে পড়া স্ক্রোলিংয়ের অভিজ্ঞতার অবসান ঘটাবে কারণ url- বারটি লুকানোর পরে আঙ্গুলটি পর্দা থেকে সরিয়ে দেওয়ার পরে .header-ধারকটি পুনরুদ্ধার করবে।

সিএসএস-সমাধান:

নিম্নলিখিত দুটি লাইন যুক্ত করা, ইউআরএল-বার হাইড করে এবং উল্লম্ব স্ক্রোলিং এখনও সম্ভব তা প্রতিরোধ করবে:

html {
    overflow: hidden;
}
body {
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
}

Comments

হ্যাঁ এটি আপনি যেমন বলছেন ঠিক তেমন সমাধান করে তবে এটি ন্যাভ বারটি সর্বদা প্রদর্শিত হচ্ছে এমন স্তন্যপান করে। কিছু ফোনে এটি মূল্যবান পর্দার স্থানের একটি অংশ নিতে পারে!

— ডেভ ক্লার্ক

এটি সত্য, এটি প্রতিরোধের জন্য, আপনি অতিরিক্তভাবে একটি জাভাস্ক্রিপ্ট-ওয়ার্কারআউন্ড ব্যবহার করতে পারেন। তবে এই উদাহরণটি জেএস ছাড়াই কাজ করে works

— মাদুর

আমি এই সমাধানটি চেষ্টা করার সময় স্ক্রোল সম্পূর্ণরূপে অক্ষম।

— নিতিন বেবি

ধন্যবাদ, এটি আমার পরিস্থিতির জন্য দুর্দান্ত কাজ করেছে! অন্য কারও জন্য উল্লেখ করা উচিত যা এটি মিস করতে পারে যে এইচটিএমএল এবং বডি ট্যাগগুলি কাজ করার জন্য 100% উচ্চতায় সেট করতে হবে (আমি প্রথমে প্রথমে আপনার উত্তরটি প্রথমে স্কিম করেছিলাম এবং "সমাধান" এর প্রথম উল্লেখে গিয়েছিলাম)।

— জ্বলুন

-উইবকিট-ওভারফ্লো-স্ক্রোলিং উত্পাদন সাইটগুলিতে ব্যবহার করা উচিত নয়। বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস / ডকস

Answer 4

মিডিয়া ক্যোয়ারী এবং কিছু গণিত দিয়ে সমস্যার সমাধান করা যেতে পারে। এখানে পোর্টেট ওরিয়েন্টেশনের জন্য একটি সমাধান রয়েছে:

@media (max-device-aspect-ratio: 3/4) {
  height: calc(100vw * 1.333 - 9%);
}
@media (max-device-aspect-ratio: 2/3) {
  height: calc(100vw * 1.5 - 9%);
}
@media (max-device-aspect-ratio: 10/16) {
  height: calc(100vw * 1.6 - 9%);
}
@media (max-device-aspect-ratio: 9/16) {
  height: calc(100vw * 1.778 - 9%);
}

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

1) আপনি লক্ষ্য করতে চান এমন অনুপাতের জন্য একটি মিডিয়া ক্যোয়ারী তৈরি করুন।

• দিক অনুপাতের পরিবর্তে ডিভাইস-অনুষঙ্গ-অনুপাত ব্যবহার করুন কারণ ইউআরএল বারটি অদৃশ্য হয়ে যাওয়ার পরে যখন আকার পরিবর্তন হবে

• আমি সর্বাধিক জনপ্রিয়গুলির মধ্যে অনুসরণ করতে যে কোনও দিক অনুপাত লক্ষ্যবস্তু করতে ডিভাইস-দিক-অনুপাতকে 'সর্বাধিক' যুক্ত করেছি। ততটা সুনির্দিষ্ট হবে না তবে তারা কেবল ব্যবহারকারীর সংখ্যালঘুদের জন্য থাকবে এবং এখনও যথাযথ vh এর খুব কাছাকাছি থাকবে।

• অনুভূমিক / উল্লম্ব ব্যবহার করে মিডিয়া ক্যোয়ারী মনে রাখবেন, সুতরাং পোর্টেটের জন্য আপনাকে সংখ্যাগুলি ফ্লিপ করতে হবে

2) প্রতিটি মিডিয়া ক্যোয়ারীর জন্য উলম্ব উচ্চতার যে পরিমাণ শতাংশ আপনি গুণ অনুপাতের বিপরীতে উপাদানটি ভিডাব্লুতে চান তা গুণান।

• আপনি যেহেতু প্রস্থ এবং প্রস্থের প্রস্থের অনুপাত জানেন, তাই আপনি উচ্চতা / প্রস্থের অনুপাতের সাহায্যে আপনার চান% (আপনার ক্ষেত্রে 100%) গুণান।

3) আপনাকে url বারের উচ্চতা নির্ধারণ করতে হবে এবং তারপরে উচ্চতা থেকে বিয়োগ করবে। আমি সঠিক পরিমাপ খুঁজে পাইনি তবে আমি ল্যান্ডস্কেপে মোবাইল ডিভাইসের জন্য 9% ব্যবহার করি এবং এটি মোটামুটি ভালভাবে কাজ করে বলে মনে হয়।

এটি খুব মার্জিত সমাধান নয়, তবে অন্যান্য বিকল্পগুলি সেগুলি বিবেচনা করে খুব ভাল নয়:

• আপনার ওয়েবসাইটটি ব্যবহারকারীকে বগী বলে মনে হচ্ছে,

• অযৌক্তিক আকারের উপাদান থাকা, বা

• কিছু বেসিক স্টাইলিংয়ের জন্য জাভাস্ক্রিপ্ট ব্যবহার করা ,

অপূর্ণতা হ'ল কিছু ডিভাইসে সর্বাধিক জনপ্রিয়ের চেয়ে আলাদা url বার উচ্চতা বা দিক অনুপাত থাকতে পারে। তবে এই পদ্ধতিটি ব্যবহার করে যদি কেবলমাত্র অল্প সংখ্যক ডিভাইসই কয়েক পিক্সেলের সংযোজন / বিয়োগ করতে ভোগ করে তবে সোয়াইপ করার সময় ওয়েবসাইটের আকার পরিবর্তন করা প্রত্যেকের চেয়ে এটি আমার কাছে অনেক ভাল বলে মনে হয়।

এটি আরও সহজ করার জন্য, আমি একটি SASS মিক্সিনও তৈরি করেছি:

@mixin vh-fix {
  @media (max-device-aspect-ratio: 3/4) {
    height: calc(100vw * 1.333 - 9%);
  }
  @media (max-device-aspect-ratio: 2/3) {
    height: calc(100vw * 1.5 - 9%);
  }
  @media (max-device-aspect-ratio: 10/16) {
    height: calc(100vw * 1.6 - 9%);
  }
  @media (max-device-aspect-ratio: 9/16) {
    height: calc(100vw * 1.778 - 9%);
  }
}

Comments

খুবই সৃজনশীল! যদিও 9% অনুমানের অনুরাগী নন।

— w00t

খুব সাধারণ এবং স্মার্ট! আসল আচরণ অনুকরণের জন্য আপনি vh-fix এ একটি পরামিতি যুক্ত করতে পারেন:@mixin vh-fix($vh: 100)height: calc(100vw * (1.333 * $vh / 100) - 9%)

— ভিএইচ

height: calc(100vw * (1.333 * #{$vh} / 100) - 9%)

— উপরেরটি

আমার ব্যবহারের ক্ষেত্রে, এটি সত্যিই ভালভাবে কাজ করেছে এবং আমি এটি অপসারণের পরে আরও ভাল -9%।

— বেন ফ্লেমিং

Answer 5

এখানে সমস্ত উত্তরই windowউচ্চতা ব্যবহার করছে যা ইউআরএল বার দ্বারা প্রভাবিত। সবাই কি screenউচ্চতার কথা ভুলে গেছেন ?

এখানে আমার jQuery সমাধান:

$(function(){

  var $w = $(window),
      $background = $('#background');

  // Fix background image jump on mobile
  if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) {
    $background.css({'top': 'auto', 'bottom': 0});

    $w.resize(sizeBackground);
    sizeBackground();
  }

  function sizeBackground() {
     $background.height(screen.height);
  }
});

.css()অংশ যুক্ত করা অনিবার্যভাবে শীর্ষ-প্রান্তিকৃত নিখুঁত অবস্থানযুক্ত উপাদানটিকে নীচে প্রান্তিককরণে পরিবর্তন করছে, সুতরাং কোনও লাফ নেই। যদিও, আমি মনে করি যে এটি কেবল সাধারণ সিএসএসে সরাসরি যুক্ত করার কোনও কারণ নেই।

আমাদের ইউজার এজেন্ট স্নিফার দরকার কারণ ডেস্কটপগুলিতে পর্দার উচ্চতা সহায়ক হবে না।

এছাড়াও, এই সমস্তটি ধরে #backgroundনেওয়া উইন্ডোটি পূরণ করার একটি স্থির-অবস্থান উপাদান।

জাভাস্ক্রিপ্ট পিউরিস্টদের জন্য (সতর্কতা - অরীক্ষিত):

var background = document.getElementById('background');

// Fix background image jump on mobile
if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) {
  background.style.top = 'auto';
  background.style.bottom = 0;

  window.onresize = sizeBackground;
  sizeBackground();
}

function sizeBackground() {
  background.style.height = screen.height;
}

সম্পাদনা: দুঃখিত যে এটি একাধিক ব্যাকগ্রাউন্ডের সাথে আপনার নির্দিষ্ট সমস্যার সরাসরি উত্তর দেয় না। মোবাইলে ঝাঁপিয়ে পড়া স্থির ব্যাকগ্রাউন্ডের এই সমস্যাটি অনুসন্ধান করার সময় এটি প্রথম ফলাফলগুলির মধ্যে একটি।

Comments

আমি এই উত্তরগুলির মিলিয়ন চেষ্টা করেছি এবং এটি এখন পর্যন্ত সেরা। আমি মূলত এটি <<> তে ব্যবহার করার চেষ্টা করছিলাম কারণ এর ব্যাকগ্রাউন্ড ছিল। পুরো পৃষ্ঠাটি মোড়ানোর জন্য একটি ডিভিডি ব্যবহার করা অন্যান্য সমস্যার কারণে ঘটেছে। জেড-ইনডেক্সের সাথে একটি খালি ডিভ ব্যবহার: -1 ব্যাকগ্রাউন্ডটি উপরের সাথে মিলিত সেরা সমাধান বলে মনে হয়েছিল। ডেস্কটপে এটি করা আমার সাইটের জন্য ক্ষতি করে না বলে আমি মোবাইল সনাক্তকরণটি বের করেছিলাম। কোনও গণিত (যা ট্যাবগুলির আকারটি ভুল অনুমান করতে পারে), পুনরায় আকার দেওয়ার জন্য কোনও হ্যান্ডলারের প্রয়োজন নেই। পটভূমি হ'ল পুরো পর্দা, নীচে অ্যাঙ্কার্ড। সম্পন্ন. এটা ভালবাসা!

— ইভান ল্যাংলোইস

Answer 6

যখন আমি একটি প্রবেশদ্বার পর্দা তৈরি করার চেষ্টা করছিলাম যা পুরো ভিউপোর্টটি কভার করে। দুর্ভাগ্যক্রমে, গৃহীত উত্তর আর কাজ করে না।

1) উচ্চতা সেট সঙ্গে উপাদান 100vh প্রতিটি সময় ভিউপোর্টের আকার পরিবর্তিত যখন ইউআরএল বারে (ডিস) প্রদর্শিত হবার কারণে ঘটে তখন সেগুলিও অন্তর্ভুক্ত করে।

2) $(window).height() URL বারের আকার দ্বারা প্রভাবিত মানগুলিও দেয়।

একটি সমাধান হ'ল অ্যালেক্সকেম্পটনের উত্তরেরtransition: height 999999s পরামর্শ অনুসারে উপাদানটিকে "হিমায়িত করা" । অসুবিধাটি হ'ল এটি পর্দার ঘোরার কারণে সৃষ্ট ভিউপোর্টের আকারের পরিবর্তনের সাথে সমস্ত ভিউপোর্ট আকারের পরিবর্তনের সাথে কার্যকরভাবে অক্ষম করে।

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

function greedyJumbotron() {
    var HEIGHT_CHANGE_TOLERANCE = 100; // Approximately URL bar height in Chrome on tablet

    var jumbotron = $(this);
    var viewportHeight = $(window).height();

    $(window).resize(function () {
        if (Math.abs(viewportHeight - $(window).height()) > HEIGHT_CHANGE_TOLERANCE) {
            viewportHeight = $(window).height();
            update();
        }
    });

    function update() {
        jumbotron.css('height', viewportHeight + 'px');
    }

    update();
}

$('.greedy-jumbotron').each(greedyJumbotron);

সম্পাদনা: আমি আসলে এই কৌশলটি এক সাথে ব্যবহার করি height: 100vh। পৃষ্ঠাটি প্রথম থেকেই সঠিকভাবে রেন্ডার করা হয় এবং তারপরে জাভাস্ক্রিপ্ট লিক করে এবং নিজেই উচ্চতা পরিচালনা করতে শুরু করে। পৃষ্ঠাটি লোড হওয়ার সময় এইভাবে কোনও ঝাঁকুনি নেই (এমনকি তার পরেও)।

Comments

আমি অনুরূপ কিছু ব্যবহার করেছি, তবে height: 100vhপ্রাথমিক সিএসএসে সেট করার min-height:100vhপরিবর্তে আমি সেট করেছি এবং তারপরে উইন্ডো আকারে আমি গণনা min-heightকরে ভিউ-পোর্টের উচ্চতায় সেট করি। আপনার সাইটটি যখন ছোট পর্দায় দেখা হয় এবং ভিউপোর্টে থাকা সামগ্রীটি খুব বড় হয় তখন এটি কার্যকর। পুনরায় আকারের ইভেন্টে একটি ডেবিউন / থ্রোটল সেটটাইমআউট কিছু ব্রাউজারগুলিতে পারফরম্যান্স উন্নত করতে সহায়তা করে (আকার পরিবর্তন খুব ঘন ঘন আগুন লাগে)

— ট্রয় মোরহাউস

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

— tobik

আহ হাঁ, আমি যে একই সমস্যা, কিন্তু jumbotron পরিবর্তন করে এটি সংশোধন করা হয়েছে display: tableএবং তারপর অভ্যন্তরীণ কন্টেইনার সেটিং display: table-cellসঙ্গে vertical-align: middle। কবজির মতো কাজ করেছেন।

— ট্রয় মোরহাউস

সত্যি? কারণ আমি একই পদ্ধতির চেষ্টা করেছি কিন্তু আমি ব্যর্থ হয়েছি। : আমি সত্যিই মনে রাখবেন না কি সমস্যা হয়েছে কিন্তু এই প্রাসঙ্গিক হতে পারে stackoverflow.com/questions/7790222/...

— tobik

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

— ট্রয় মোরহাউস

Answer 7

সমাধান আমি বর্তমানে ব্যবহার করছি চেক করা হল userAgentউপর $(document).readyযদি এটা আপত্তিকর ব্রাউজার এক দেখতে। যদি তা হয় তবে এই পদক্ষেপগুলি অনুসরণ করুন:

1. '100%' না দিয়ে বর্তমান ভিউপোর্ট উচ্চতায় প্রাসঙ্গিক উচ্চতা সেট করুন
2. বর্তমান ভিউপোর্ট অনুভূমিক মান সংরক্ষণ করুন
3. তারপরে, $(window).resizeনতুন আনুভূমিক ভিউপোর্টের মাত্রা যদি এর প্রাথমিক মান থেকে আলাদা হয় তবে কেবলমাত্র প্রাসঙ্গিক উচ্চতার মানগুলি আপডেট করুন
4. নতুন অনুভূমিক ও উল্লম্ব মান সংরক্ষণ করুন

Allyচ্ছিকভাবে, আপনি যখন ঠিকানা বার (গুলি) এর উচ্চতার বাইরে থাকেন কেবল তখনই উল্লম্ব আকারের অনুমতি দেওয়ার পরীক্ষা করতে পারেন।

ওহ, এবং ঠিকানা বারটি প্রভাবিত করে $(window).height। দেখুন: মোবাইল ওয়েবকিট ব্রাউজার (ক্রোম) ঠিকানা বার পরিবর্তন করে window (উইন্ডো)। উচ্চতা (); ব্যাকগ্রাউন্ড-আকার তৈরি: প্রতিটি বার কভার পুনরুদ্ধার করুন জেএস "উইন্ডো" প্রস্থ-উচ্চতা বনাম "স্ক্রিন" প্রস্থ-উচ্চতা?

Comments

আমি এটি চেষ্টা করে দেখিনি তবে আপনার প্রথম পয়েন্টটি কি আইওএসের জন্য কাজ করবে না? ( thatemil.com/blog/2013/06/13/… )

— ডেভ ক্লার্ক

আমি প্রথম ধাপে তার মূল্য নির্ধারণ করছি, তবে আমি অবাক হয়েছি যে আপনি সমস্যার সমাধান করার জন্য জেসনের প্রতিক্রিয়া পেয়েছেন। উল্লিখিত হিসাবে আমি খুঁজে পেয়েছি, আমি যুক্ত লিঙ্কযুক্ত পূর্ববর্তী প্রশ্নের অন্য ব্যবহারকারীর সাথে, যে অ্যান্ড্রয়েডের ক্রোমের ঠিকানা দণ্ডটি দৃশ্যমান বা উপস্থিত না হলে ((উইন্ডো)। উচ্চতা () পদ্ধতির মান পরিবর্তিত হয়। আমি এই ছোট্ট সাইটটিকে একসাথে ছুঁড়ে ফেলেছি যা কেবলমাত্র window (উইন্ডো) প্রকাশ করে ightউত্তর () ফলাফলটি একটি সতর্কতার ফলে আসে এবং যখন ঠিকানা বারটি দেখা যায় / না থাকে তখন ক্রোমে আমার নেক্সাস 4 এ স্পষ্টতই বিভিন্ন মান সরবরাহ করে: ঝড়-মেডো -5908 .herokuapp.com

— এমপি

এই 100% আমার অ্যান্ড্রয়েড ডিভাইসে সমস্যাটি সমাধান করে যদিও আমি আমার আইপ্যাডে একই রকম সমস্যা দেখছি যা এটি এখনও দেখা হচ্ছে যা ঠিক করতে দেখা যাচ্ছে না।

— ডেভ ক্লার্ক

আপনি কি নিজের সমাধানের জন্য কিছু কোড সরবরাহ করতে সক্ষম এবং আমি এটি ব্যবহার করে দেখতে পারি?

— ডেভ ক্লার্ক

Answer 8

আমি জাভাস্ক্রিপ্ট ব্যবহার না করে সত্যিই একটি সহজ সমাধান পেয়েছি:

transition: height 1000000s ease;
-webkit-transition: height 1000000s ease;
-moz-transition: height 1000000s ease;
-o-transition: height 1000000s ease;

এই সমস্ত কিছুই আন্দোলনকে বিলম্বিত করে যাতে এটি অবিশ্বাস্যরূপে ধীর হয় যে এটি নজরে না আসা।

Comments

@ Tyguy7 এটা জরিমানা যখনই আপনার উচ্চতা একটি নির্দিষ্ট মান অর্থাৎ সেট না করা হয় কাজ 100%, 100vh। আইই 8 হ'ল একমাত্র প্রধান ব্রাউজার যা রূপান্তরগুলি সমর্থন করে না।

— পাভ সিধু

দুর্দান্ত এবং সহজ সমাধান!

— zdarsky.peter

আপনি এমন কোনও ডিভাইসে না আসা পর্যন্ত এটি দুর্দান্ত কাজ করে যেখানে আপনি প্রতিকৃতি থেকে ল্যান্ডস্কেপে পরিবর্তন করতে পারবেন। এটি যখন ঘটে তখন ডিজাইনটি নষ্ট হয়ে যায়।

— নাগি নিক

@ নাগনিক, যা আমার পক্ষে এত বড় সমস্যা ছিল না। আপনি জাভাস্ক্রিপ্টে ওরিয়েন্টেশন পরিবর্তন সনাক্ত করতে পারেন এবং পটভূমি চিত্রটি সামঞ্জস্য করতে পারেন।

— পাভ সিধু

Answer 9

আমার সমাধানটিতে কিছুটা জাভাস্ক্রিপ্ট জড়িত। 100% বা 100vh ডিভের উপরে রাখুন (এটি প্রাথমিক পৃষ্ঠা লোডে ডিভটি উপস্থিত হবে না)। তারপরে পৃষ্ঠাটি লোড হয়ে গেলে, উইন্ডোটির উচ্চতাটি ধরুন এবং এটিকে প্রশ্নযুক্ত উপাদানটিতে প্রয়োগ করুন। লাফটি এড়ায় কারণ এখন আপনার ডিভের উপর একটি স্থির উচ্চতা রয়েছে।

var $hero = $('#hero-wrapper'),
    h     = window.innerHeight;

$hero.css('height', h);

Answer 10

আমি ভিএইচ ইউনিটগুলি ব্যবহারের জন্য একটি ভ্যানিলা জাভাস্ক্রিপ্ট সমাধান তৈরি করেছি। ভিএইচ ব্যবহার করে বেশিরভাগ জায়গায় অ্যাড্রেস বারগুলি স্ক্রোলকে কমিয়ে আনা হয়। পৃষ্ঠাটি যখন আঁকবে তখন যে জাঙ্কটি দেখায় তা স্থির করতে আমি এখানে এই জেএস পেয়েছি যা ভিএইচ ইউনিটগুলি ব্যবহার করে আপনার সমস্ত উপাদানকে ধরে ফেলবে (যদি আপনি তাদের শ্রেণি দেন .vh-fix), এবং তাদের ইন্লাইনড পিক্সেল উচ্চতা দেবেন। মূলত আমরা যে উচ্চতায় চাই সেগুলি সেগুলি হ'ল। প্রতিক্রিয়াশীল থাকার জন্য আপনি ঘূর্ণায়নে বা ভিউপোর্টের আকার পরিবর্তনে এটি করতে পারেন।

var els = document.querySelectorAll('.vh-fix')
if (!els.length) return

for (var i = 0; i < els.length; i++) {
  var el = els[i]
  if (el.nodeName === 'IMG') {
    el.onload = function() {
      this.style.height = this.clientHeight + 'px'
    }
  } else {
    el.style.height = el.clientHeight + 'px'
  }
}

এটি আমার সমস্ত ব্যবহারের কেস সমাধান করেছে, আশা করি এটি সাহায্য করবে।

Answer 11

এই সমস্যাটি সমাধান করার জন্য এটিই আমার সমাধান, আমি সরাসরি কোডে মন্তব্য যুক্ত করেছি। আমি এই সমাধানটি পরীক্ষা করেছি এবং ভাল কাজ করেছি। আশা করি আমরা সবার জন্য কার্যকর হব একই সমস্যা আছে।

//remove height property from file css because we will set it to first run of page
//insert this snippet in a script after declarations of your scripts in your index

var setHeight = function() {    
  var h = $(window).height();   
  $('#bg1, #bg2').css('height', h);
};

setHeight(); // at first run of webpage we set css height with a fixed value

if(typeof window.orientation !== 'undefined') { // this is more smart to detect mobile devices because desktop doesn't support this property
  var query = window.matchMedia("(orientation:landscape)"); //this is is important to verify if we put 
  var changeHeight = function(query) {                      //mobile device in landscape mode
    if (query.matches) {                                    // if yes we set again height to occupy 100%
      setHeight(); // landscape mode
    } else {                                                //if we go back to portrait we set again
      setHeight(); // portrait mode
    }
  }
  query.addListener(changeHeight);                          //add a listner too this event
} 
else { //desktop mode                                       //this last part is only for non mobile
  $( window ).resize(function() {                           // so in this case we use resize to have
    setHeight();                                            // responsivity resisizing browser window
  }); 
};

Comments

কোয়েরি মেলে এবং যদি এটি মেলে না তবে আপনি পরিবর্তন হিট পদ্ধতির অভ্যন্তরে সেটহাইট () সেট করছেন। এটি প্রয়োজন হিসাবে কেবল বিবৃতি অপসারণ।

— ডেনিস মেসনার

Answer 12

এটি আমি চেষ্টা করেছি সর্বোপরি সেরা সমাধান (সর্বাধিক)।

... এবং এটি ঠিকানা বারের নেটিভ অভিজ্ঞতা রাখে না !

উদাহরণস্বরূপ আপনি সিএসএসের সাথে উচ্চতাটি 100% এ সেট করতে পারেন এবং জাভাস্ক্রিপ্টের সাহায্যে উইন্ডোটির উচ্চতার 0.9 * পয়েন্টে জাভাস্ক্রিপ্টের সাহায্যে সেট করতে পারেন, যখন নথিটি লোড হয়।

JQuery সহ উদাহরণস্বরূপ:

$("#element").css("height", 0.9*$(window).height());

)

দুর্ভাগ্যক্রমে এমন কিছু নেই যা খাঁটি সিএসএসের সাথে কাজ করে: পি তবে এটি ক্ষুদ্র vhএবং আইফোনে vwবগি রয়েছে - শতাংশ ব্যবহার করুন।

Answer 13

আমি জাভাস্ক্রিপ্ট সহ আমার প্রস্থের উপাদান সেট করেছি। আমি ডি vh সেট করার পরে।

এইচটিএমএল

<div id="gifimage"><img src="back_phone_back.png" style="width: 100%"></div>

CSS

#gifimage {
    position: absolute;
    height: 70vh;
}

জাভাস্ক্রিপ্ট

imageHeight = document.getElementById('gifimage').clientHeight;

// if (isMobile)       
document.getElementById('gifimage').setAttribute("style","height:" + imageHeight + "px");

এটি আমার পক্ষে কাজ করে। আমি jquery ect ব্যবহার করি না। কারণ আমি এটি যত তাড়াতাড়ি সম্ভব লোড করা চাই।

Answer 14

এই সমস্যার সমস্ত বিবরণ বুঝতে এবং সর্বোত্তম বাস্তবায়নটি বের করতে কয়েক ঘন্টা সময় নিয়েছে। এটি কেবলমাত্র এপ্রিল ২০১ of হিসাবে দেখা যাচ্ছে আইওএস ক্রোমের এই সমস্যা রয়েছে। আমি অ্যান্ড্রয়েড ক্রোম এবং আইওএস সাফারি চেষ্টা করেছি - এই ফিক্স ছাড়া উভয়ই ভাল ছিল। সুতরাং আমি যে আইওএস ক্রোমটি ব্যবহার করছি তার জন্য ঠিক করাটি হ'ল:

$(document).ready(function() {
   var screenHeight = $(window).height();
   $('div-with-background-image').css('height', screenHeight + 'px');
});

Answer 15

যদি আপনার পটভূমি অনুমতি দেয় তবে ব্যাকগ্রাউন্ড-আকারটি কেন সেট করবেন না: মিডিয়া প্রশ্নের সাথে কেবল ডিভাইসের প্রস্থকে coveringেকে রাখুন এবং পাশাপাশি ব্যবহার করুন: অবস্থানের পরে: স্থির; এখানে হ্যাক ।

IE: পটভূমি-আকার: 901px; যে কোনও পর্দার <900px? নিখুঁত বা প্রতিক্রিয়াশীল নয় তবে মোবাইলের জন্য আমার জন্য একটি মোহন কাজ করেছে <480px কারণ আমি একটি বিমূর্ত বিজি ব্যবহার করছি।

Answer 16

আমি এই কার্যকারিতাটি ব্যবহার করছি: পৃষ্ঠা লোডে বিজি 1 এর উচ্চতা ঠিক করুন:

var BG = document.getElementById('bg1');
BG.style.height = BG.parentElement.clientHeight;

তারপরে উইন্ডোটিতে পুনরায় আকারের ইভেন্ট শ্রোতাদের সংযুক্ত করুন যা এটি করে: যদি আকার পরিবর্তনের পরে উচ্চতার মধ্যে পার্থক্য 60px এর চেয়ে কম হয় (ইউআরএল বারের উচ্চতার চেয়ে বেশি কিছু) তবে কিছু না করে এবং যদি এটি 60px এর চেয়ে বেশি হয় তবে তার পিতামাতার উচ্চতায় আবার বিজি 1 এর উচ্চতা সেট করুন! সম্পূর্ণ কোড:

window.addEventListener("resize", onResize, false);
var BG = document.getElementById('bg1');
BG.style.height = BG.parentElement.clientHeight;
var oldH = BG.parentElement.clientHeight;

function onResize() {
    if(Math.abs(oldH - BG.parentElement.clientHeight) > 60){
      BG.style.height = BG.parentElement.clientHeight + 'px';
      oldH = BG.parentElement.clientHeight;
    }
}

পিএস: এই বাগটি এত বিরক্তিকর!

Answer 17

@ অ্যালেক্সকিম্পটনের উত্তরের মতো। (দুঃখিত মন্তব্য করতে পারে না)

আমি উপাদান পুনরায় আকার প্রতিরোধ করতে দীর্ঘ ট্রানজিশন বিলম্ব ব্যবহার করে যাচ্ছি।

উদাহরণ:

transition: height 250ms 600s; /*10min delay*/

এর সাথে ট্রেডঅফ হ'ল এটি ডিভাইস ঘোরানো সহ উপাদানটির পুনরায় আকার রোধ করে orientationchange।

Answer 18

যাঁরা উইন্ডোটির প্রকৃত অভ্যন্তরীণ উচ্চতা এবং উল্লম্ব স্ক্রোলটি শুনতে চান যখন ক্রোম মোবাইল ব্রাউজারটি ইউআরএল বারটি লুকানোতে দেখানো থেকে বিপরীতভাবে রূপান্তরিত করে, তখন আমি খুঁজে পেলাম কেবলমাত্র একটি সমাধান যা অন্তরালের ফাংশন সেট করে and window.innerHeightএর পূর্বের মানটি দিয়ে তারতম্যটি পরিমাপ করুন ।

এটি এই কোডটি প্রবর্তন করে:

var innerHeight = window.innerHeight;
window.setInterval(function ()
{
  var newInnerHeight = window.innerHeight;
  if (newInnerHeight !== innerHeight)
  {
    var newScrollY = window.scrollY + newInnerHeight - innerHeight;
    // ... do whatever you want with this new scrollY
    innerHeight = newInnerHeight;
  }
}, 1000 / 60);

আমি আশা করি এটি কার্যকর হবে। এর চেয়ে ভাল সমাধান কি কেউ জানে?

Answer 19

অনুরূপ সমস্যা হওয়ার সময় আমি যে সমাধানটি নিয়ে এসেছি তা হ'ল window.innerHeightপ্রতিবার touchmoveইভেন্টটি বহিষ্কার হওয়ার সময় উপাদানের উচ্চতা নির্ধারণ করা।

var lastHeight = '';

$(window).on('resize', function () {
    // remove height when normal resize event is fired and content redrawn
    if (lastHeight) {
        $('#bg1').height(lastHeight = '');
    }
}).on('touchmove', function () {
    // when window height changes adjust height of the div
    if (lastHeight != window.innerHeight) {
        $('#bg1').height(lastHeight = window.innerHeight);
    }
});

এটি উপাদানটি সর্বদা উপলব্ধ স্ক্রিনের ঠিক 100% বিস্তৃত করে তোলে, আরও বেশি এবং কম কিছু না। এমনকি অ্যাড্রেস বারটি লুকিয়ে বা দেখানোর সময়।

তবুও এটি অত্যন্ত দুঃখের বিষয় যে আমাদের সেই ধরণের প্যাচগুলি নিয়ে আসতে হবে, যেখানে সাধারণ position: fixedকাজ করা উচিত।

Answer 20

আইওএসে সিএসএস কাস্টম বৈশিষ্ট্যগুলির (ভেরিয়েবলগুলি) সমর্থন করে আপনি এটিকে জেএসের সাথে সেট করতে এবং সেগুলি কেবল আইওএস এ ব্যবহার করতে পারেন।

const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS) {
  document.body.classList.add('ios');
  const vh = window.innerHeight / 100;
  document.documentElement.style
    .setProperty('--ios-10-vh', `${10 * vh}px`);
  document.documentElement.style
    .setProperty('--ios-50-vh', `${50 * vh}px`);
  document.documentElement.style
    .setProperty('--ios-100-vh', `${100 * vh}px`);
}

body.ios {
    .side-nav {
        top: var(--ios-50-vh);
    }
    section {
        min-height: var(--ios-100-vh);
        .container {
            position: relative;
            padding-top: var(--ios-10-vh);
            padding-bottom: var(--ios-10-vh);
        }
    }
}

Answer 21

আমার উত্তরটি এখানে উপস্থিত প্রত্যেকের জন্য (যেমনটি আমি করেছি) লুকিয়ে থাকা ঠিকানা খালি / ব্রাউজার ইন্টারফেসের কারণে সৃষ্ট বাগের জন্য উত্তর খুঁজতে হবে।

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

// Keep track of window width
let myWindowWidth = window.innerWidth;

window.addEventListener( 'resize', function(event) {

    // If width is the same, assume hiding address bar
    if( myWindowWidth == window.innerWidth ) {
         return;
    }

    // Update the window width
    myWindowWidth = window.innerWidth;

    // Do your thing
    // ...
});