সাফারি আইওএস মেনু বারটি স্ক্রিনের 10% এর নীচে বোতামগুলির সাথে বিরোধ করে


14

আমি একটি ওয়েব পোর্টাল তৈরি করছি যা একাধিক প্ল্যাটফর্মে কার্যকরী এবং সুন্দর হতে হবে। প্ল্যাটফর্মগুলির মধ্যে একটি হ'ল আইওএস সাফারি এবং এটি হ'ল আমি কোনও সমস্যার মুখোমুখি হয়েছি। আমার কোডে আমি ১০০% প্রস্থ এবং উচ্চতা সহ একটি ডিভের নীচে দুটি ভাসমান বোতামগুলি প্রান্তিককরণ করি এটি সমস্ত সূক্ষ্মভাবে কাজ করে এবং আমার বোতামগুলি ঠিক পৃষ্ঠার নীচের অংশে যেমন মনে করা হয় ঠিক তেমন প্রদর্শিত হয়। তবে আমি যখন বাটনগুলিতে ক্লিক করি তখন মোবাইল সাফারি থেকে কমপ্যাক্ট ভিউটি পুরো ভিউতে চলে যায় এবং আমার বোতামগুলি নীচের এনএভি বারের আড়ালে লুকানো থাকে!

যখন ব্যবহারকারীর স্ক্রিনের 10% নীচে ট্যাপ করা হয় তখন কি সাফারি মোবাইলের জন্য বর্ধিত মেনুটি দেখানো স্বাভাবিক আচরণ? আমি কীভাবে এড়াতে পারি?

এই জিআইএফ-তে আপনি আইওএস সিমুলেটরটিতে সমস্যাটি দেখতে পাচ্ছেন: উদাহরণ
আপনি দেখতে পাচ্ছেন যে সমস্যাটি কেবল তখনই ঘটে যখন একটি বোতামটি ভিউর 10% নীচে থাকে। এটি কেবলমাত্র একটি সাধারণ বোতাম, আমার কোডটি বেশ কয়েকটি বিকাশকারী দ্বারা ট্রিপল চেক করেছিলেন এবং এতে কোনও ত্রুটি নেই।


আপনি যদি আপনার কোড স্নিপেট তালিকাভুক্ত করেন তবে এটি ফ্ল্যাগ করুন এবং আমরা ওভারফ্লো স্ট্যাক করতে মাইগ্রেট করতে পারি ...
বিমিকে

উত্তর:


5

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


4
ধন্যবাদ প্যাট্রিক্স, আমি জানি এটি স্বাভাবিক, তবে এইচটিএমএল, সিএসএস বা জেএস এর মাধ্যমে এই আচরণকে ওভাররাইড করার কোনও উপায় আছে কি? এই প্রশ্নটি আমি ইতিমধ্যে স্ট্যাক ওভারফ্লোতে পোস্ট করেছি তবে যেহেতু এটি আপেলের সাথে সম্পর্কিত এমন কোনও কারণ হতে পারে জিজ্ঞাসা-ভিন্ন কোনও উপায় জানতে পারে
dennismuijs

1
স্ট্যাকওভারফ্লো (বা এমনকী একটি এসই সাইট যেখানে ওয়েব বিকাশকারীরা ঝুলিয়ে রাখে) AD এর চেয়ে এই ধরণের জিনিসটির জন্য ভাল (যা শেষ ব্যবহারকারী সমস্যাগুলির উপর দৃষ্টি নিবদ্ধ করে)। ব্রাউজার নিয়ন্ত্রণগুলি অ্যাক্সেস করা কোনওভাবে ব্যবহারকারীর জন্য প্রয়োজনীয় বলে আমি সন্দেহ করি যদিও আচরণটি এড়ানোর কোনও উপায় আছে কিনা I
nohillside

এর জন্য স্ট্যাক ওভারফ্লো প্রশ্নোত্তর লিঙ্ক?
বেন রবার্টস

7

আমি মনে করি আমি একটি উত্তর খুঁজে পেতে পারে। নিম্নলিখিত বিষয়শ্রেণীতে আপনার সামগ্রী সেট করা:

  • height: 100% (সামগ্রীটি ভিউপোর্টটি পূরণ করতে এবং নীচে ছাড়িয়ে যাওয়ার অনুমতি দেয়)
  • overflow-y: scroll(আপনাকে ভিউপোর্টের নীচে স্ক্রোল করতে দেয়; ডিফল্ট মানটি হয় visible)
  • -webkit-overflow-scrolling: touch (কোনও স্ক্রোল আচরণ মসৃণ করতে)

সাফারিতে আইওএস মেনুটি সর্বদা উপস্থিত হতে বাধ্য করে। এইভাবে, বোতাম ক্লিকগুলি সাফারি মেনুটি খোলার পরিবর্তে কাজ করবে। আশাকরি এটা সাহায্য করবে!


অবশ্যই, এটি কার্যকরভাবে কাজ করে তবে সমস্ত সাইটগুলি overflow-y: scrollতাদের মূল সামগ্রীর ক্ষেত্রটি স্থাপন সহ্য করতে পারে না । এই হ্যাকের পার্শ্ব প্রতিক্রিয়া রয়েছে যা এর সমস্ত বাচ্চাদের উপাদানগুলিকে প্রভাবিত করবে। আরও সঠিকভাবে বলতে গেলে, এই CSS বৈশিষ্ট্যগুলি সমস্ত শিশু উপাদানগুলিকে সরাসরি প্রভাবিত করে এবং সাফারি মেনুটি প্রদর্শন করতে বাধ্য করা আসলে পার্শ্ব প্রতিক্রিয়া।
zevdg

ধন্যবাদ। এখনও পর্দার নীচে দিকে আলতো চাপার চেষ্টা করেননি তবে আমার ডিজাইনের কমপক্ষে 10% সাফারির অযৌক্তিক মেনু বার দ্বারা কভার করা যাচ্ছে না। এটি যুক্ত করতে, আপনার height: 100%পাশাপাশি প্রতিটি উপাদান যুক্ত করতে হবে । এমন একটি সংস্থার জন্য যা মোবাইল ডিভাইস থেকে তাদের প্রচুর অর্থোপার্জন করে তাদের মোবাইল ওয়েব অভিজ্ঞতা ভয়ঙ্কর।
করিসিম্মন্স
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.