ওয়েব-অ্যাপে আইফোনটিকে `সিলেক্ট করাতে জুম করা থেকে বিরত করুন

Question

আমি এই কোড পেয়েছি:

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

আইফোনে একটি পূর্ণ-স্ক্রিন ওয়েব-অ্যাপে চলছে।

এই তালিকা থেকে কিছু নির্বাচন করার সময়, আইফোনটি- selectএলিমেন্টে জুম করে । এবং কিছু নির্বাচন করার পরে জুম ফিরে আসে না।

আমি কীভাবে এটি প্রতিরোধ করতে পারি? বা জুম ব্যাক আউট?

Answer 1

এটি সম্ভবত কারণ ব্রাউজারটি অঞ্চল জুম করার চেষ্টা করছে যেহেতু ফন্টের আকার প্রান্তিকের চেয়ে কম, সাধারণত আইফোনে এটি ঘটে।

"ব্যবহারকারী-স্কেলেবল = না" একটি মেটাট্যাগ বৈশিষ্ট্য দেওয়া ব্যবহারকারীকে অন্য কোথাও জুম করা থেকে বিরত রাখবে। যেহেতু সমস্যাটি কেবলমাত্র নির্বাচিত উপাদানগুলির সাথে , তাই আপনার সিএসএসে নিম্নলিখিতটি ব্যবহার করে দেখুন, এই হ্যাকটি মূলত jquery মোবাইলের জন্য ব্যবহৃত হয়।

এইচটিএমএল:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

সিএসএস:

select{
font-size: 50px;
}

src: আইফোনে নির্বাচনের পরে আনজুম করুন

Comments

যদি পাঠ্যটি দৃশ্যমান হয় (যেমন আমার ক্ষেত্রে রয়েছে) মনে হয় এটি জুম সক্ষম করার আগে 16px সর্বনিম্ন।

— মারলন ক্রিয়েটিভ

কেবল এটি আরও স্পষ্ট করার জন্য, এই লাইনটি স্বশাসন রোধ করবে:$('<meta>', {name: 'viewport',content: 'user-scalable=no'}).appendTo('head');

— আব্বাস

যেহেতু একটি নির্দিষ্ট উপাদানটিতে লেখাটি লুকানো থাকে ?? "কোনও বিন্যাসের সমস্যা আনবে না"

— বিল

বিলি আমার বলার অর্থ হ'ল, যখন ফন্টের আকারকে 50px এর মান দেওয়া হয়, তখন এটি ড্রপডাউনয়ের চেয়ে অন্যান্য এইচটিএমএল উপাদানগুলির সাথে অদ্ভুত লাগে, যা আমি লেআউট ইস্যু বলেছিলাম।

— সাসি ধর

কিন্তু আপনি অনুমতি acessibility বিষয় বা অন্য কোন কারণে ব্যবহারকারী-মাপযোগ্য নিচে উত্তর দেখার প্রয়োজন হলে stackoverflow.com/questions/6483425/...

— Göta

Answer 2

ব্যবহারকারী-স্কেলেবল = আপনার যা প্রয়োজন তা হ'ল না, ঠিক এইভাবে এই প্রশ্নের একটি যথাযথ উত্তর আছে

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Comments

আসলে, প্রস্থ = ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল = 1.0, সর্বাধিক-স্কেল = 1.0 যুক্ত করা যথেষ্ট adding আমি বিশ্বাস করি না যে আপনার সর্বোচ্চ-স্কেল সহ ব্যবহারকারী-স্কেলযোগ্য দরকার।

— ড্যান স্মার্ট

@ ডানসমার্ট, কমপক্ষে আমার ক্ষেত্রে (এবং আমি জানি না কী এটি আলাদা করে দেয়), ন্যূনতম / সর্বোচ্চ স্কেল যথেষ্ট ছিল না - ব্যবহারকারী-স্কেলেবল যোগ করে = কোনও পার্থক্য হয়নি।

— করোলা

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

— চার্লি স্ট্যানার্ড 20'15

ব্যবহারকারী-স্কেলেবল আইওএস 10 হিসাবে উপেক্ষা করা হবে

— nickdnk

যখন আপনার ফন্টটি 16px এর চেয়ে বড় হয়, কোনও ইনপুটকে ফোকাস করার সময় ব্রাউজারটি জুম বাড়তে পারে। আমার জন্য, আমার কেবল যোগ করার দরকার ছিল minimum-scale=1যা ব্যবহারকারীর জুম করার সম্ভাবনাও সংরক্ষণ করে।

— মাইক্রোস

Answer 3

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

@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus, textarea:focus, input:focus {
        font-size: 16px;
    }
}

প্রস্তাবিত এখানে দ্বারা ক্রিস্টিনা Arasmo Beymer

Comments

আমার ক্ষেত্রে আইওএস 7x পুরানো ব্যবহারকারী-পরিমাপযোগ্য যথেষ্ট ছিল না। উপরোক্ত কৌশলটি ভাগ করে নেওয়ার জন্য আপনাকে ধন্যবাদ জানিয়েছে।

— অবতরণ করেছে

Answer 4

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

জুম অক্ষম করতে বলার উত্তরগুলি আংশিক দৃষ্টিশক্ত ব্যবহারকারীরা এখনও অপেক্ষাকৃত ছোট মোবাইলগুলিতে জুম করতে চাইতে পারেন he

উদাহরণ:

# Mobile first
input, textarea, select {
  font-size: 16px;
}

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}

Comments

এটা ভালো! তবে আমার পাঠ্যটি যদি নির্বাচিত বাক্সটির পুরো প্রস্থকে উপচে ফেলে? এই ক্ষেত্রে আমি কী করতে পারি?

— Göta

যদি আপনার প্রারম্ভিক বিকল্প বার্তাটি ফিট করে তবে তা যথেষ্ট। একবারে তারা কোনও বিকল্প নির্বাচন করেছেন, এমনকি যদি কিছুটা কেটে ফেলা হয় তবে তারা সম্ভবত এটি কী তা মনে রাখবেন। তবে হ্যাঁ, সমস্যাটির মধ্যে যদি এটি বলে যে "দয়া করে একটি কো নির্বাচন করুন ..."

— মার্টিইনওয়ার্ডস

এই উত্তরটি কার্যকর হয় এবং কমপক্ষে বিঘ্নিত পদ্ধতি সরবরাহ করে বলে মনে হচ্ছে। ধন্যবাদ!

— ডিবিডে

Answer 5

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

যেহেতু পাঠ্যটি ১ p পিক্সেলের চেয়ে কম সেট করা থাকলে আইফোন ক্ষেত্রগুলি সামান্য আকারে জুম করবে, তাই আমরা আইফোনটিকে ভাবতে ভাবতে পারি যে হরফের আকার 16px এবং তারপরে এটি আমাদের আকারে রূপান্তরিত করতে পারে।

উদাহরণস্বরূপ, যখন আমাদের পাঠ্যটি 14px হয় তখন উদাহরণটি ধরা যাক তাই এটি জুম করে কারণ এটি 16px এর চেয়ে ছোট। অতএব আমরা 0.875 অনুযায়ী স্কেলটি রূপান্তর করতে পারি।

নিম্নলিখিত উদাহরণে আমি অন্যান্য বৈশিষ্ট্যগুলি কীভাবে রূপান্তর করতে হবে তা দেখানোর জন্য প্যাডিং যুক্ত করেছি।

.no-zoom {
    font-size: 16px;
    transform-origin: top left;
    transform: scale(0.875);            //  14px / 16px
    padding: 4.57px;                    // 4px / 0.875
}

আমি আসা করি এটা সাহায্য করবে!

Comments

এটি একটি বাজে কিন্তু চতুর হ্যাক এবং আমি হ্যাক পছন্দ করি না ... তবে এক্ষেত্রে এটি এই পৃষ্ঠার সেরা উত্তর এবং যদি আপনার জুম বন্ধ করতে হয় এবং এখনও নকশাকে এটির মতো রাখতে চান তবে বিকল্প নেই । অনেক ধন্যবাদ! :)

— roNn23

Answer 6

এটা চেষ্টা কর:

function DisablePinchZoom() 
{
    $('meta[name=viewport]').attr("content", "");
    $('meta[name=viewport]').attr("content", "width=yourwidth, user-scalable=no");
}

function myFunction() 
{
    $('meta[name=viewport]').attr("content", "width=1047, user-scalable=yes");
}


<select id="cmbYo" onchange="javascript: myFunction();" onclick="javascript: DisablePinchZoom();">
</select>

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

একটি আইফোন 5 এস পরীক্ষিত

Answer 7

আইওএস পৃষ্ঠার জুম করে একটি বৃহত ইনপুট ক্ষেত্র দেখায় যদি এর ফন্টের আকার 16px এর চেয়ে কম হয়।

কেবল যে কোনও ক্ষেত্রের ক্লিকে এটি পৃষ্ঠাটি জুম করে oming ক্লিকের উপর ক্লিক করুন, আমরা এটি 16px হিসাবে তৈরি করছি এবং তারপরে ডিফল্ট মানে পরিবর্তন করেছি

স্নিপেট নীচে আমার জন্য সূক্ষ্ম কাজ করে এবং মোবাইল ডিভাইসগুলির জন্য লক্ষ্যবস্তু হয়,

@media screen and (max-width: 767px) {
 select:active, input:active,textarea:active{
        font-size: 16px;
 }
}

Answer 8

সমস্ত 'নির্বাচন করুন' ফন্টের আকার 16px এ সেট করুন

{ফন্ট-আকার: 16px নির্বাচন করুন; }

Answer 9

আমি মনে করি না যে বিচ্ছিন্নতার আচরণ সম্পর্কে আপনি কিছু করতে পারবেন না।

আপনি যা চেষ্টা করতে পারেন তা হ'ল পৃষ্ঠাটি একেবারে জুম করা থেকে দূরে রাখা। আপনার পৃষ্ঠাটি ফোনের জন্য ডিজাইন করা থাকলে এটি ভাল।

<meta name="viewport" content="width=device-width" />

আর একটি জিনিস যা আপনি চেষ্টা করতে পারেন তা হল জেনেরিক "নির্বাচন করুন" স্টেটমেন্টের পরিবর্তে একটি জাভাস্ক্রিপ্ট কনস্ট্রাক্ট ব্যবহার করা using আপনার মেনুটি দেখানোর জন্য একটি লুকানো ডিভি তৈরি করুন, জাভাস্ক্রিপ্টে ক্লিকগুলি প্রসেস করুন।

শুভকামনা!

Answer 10

এখানে উত্তর হিসাবে: ইনপুট "পাঠ্য" ট্যাগে অটো জুম অক্ষম করুন - আইফোনে সাফারি

জুম চিমটি ব্যবহারকারীর ক্ষমতা অক্ষম না করে আপনি সাফারিটিকে ব্যবহারকারী ইনপুট চলাকালীন পাঠ্য ক্ষেত্রগুলিতে স্বয়ংক্রিয়ভাবে জুম করা থেকে বিরত রাখতে পারেন । কেবল যুক্ত করুন maximum-scale=1তবে অন্যান্য উত্তরে প্রস্তাবিত ব্যবহারকারী-স্কেল বৈশিষ্ট্যটি ছেড়ে দিন leave

জুম করা থাকলে আপনার আশেপাশে "ভাসমান" এমন একটি স্তরে এমন একটি ফর্ম থাকলে এটি গুরুত্বপূর্ণ ইউআই উপাদানগুলি স্ক্রিনটি বন্ধ করে দিতে পারে।

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 11

আইওএসের ডিফল্ট স্টাইলিং অক্ষম করতে এই সিএসএস যুক্ত করার চেষ্টা করুন:

-webkit-appearance: none;

এটি অন্যান্য উপাদানগুলিতেও কাজ করবে যা ইনপুট [টাইপ = অনুসন্ধান] এর মতো বিশেষ স্টাইলিং পায়।

Answer 12

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

$(function(){
    $('input, select').on("mousedown focusout", function(){
        $('input, select').css('font-size','16px');
    });
    $('input, select').on("focus", function(){
        $('input, select').css('font-size','');
    });
})