আইফোন ওরিয়েন্টেশন পোর্ট্রেট থেকে ল্যান্ডস্কেপে পরিবর্তিত হলে এইচটিএমএল ফন্ট-আকার সংরক্ষণ করুন

Question

আমার কাছে একটি মোবাইল ওয়েব অ্যাপ্লিকেশন রয়েছে যাতে প্রতিটি লি এর ভিতরে হাইপারলিংক সহ একাধিক তালিকার সাথে একটি আনর্ডারড তালিকা রয়েছে:

... আমার প্রশ্ন হল আমি হাইপারলিংকগুলি কীভাবে ফর্ম্যাট করব যাতে কোনও আইফোনে দেখার সময় তারা আকার পরিবর্তন করতে না পারে এবং অ্যাকসিলারোমিটার প্রতিকৃতি -> ল্যান্ডস্কেপ থেকে স্যুইচ করে? এই মুহুর্তে, আমার হাইপারলিংক ফন্টের আকারটি 14px হিসাবে নির্দিষ্ট করা হয়েছে, তবে ল্যান্ডস্কেপটিতে স্যুইচ করার সময়, এটি 20px পছন্দ করে দেয়। আমি চাই ফন্ট-আকার একই থাকুক। কোডটি এখানে:

ul li a
{
  font-size:14px;
  text-decoration: none;
  color: #cc9999;
}

<ul>
  <li id="home" class="active">
    <a href="home.html">HOME</a>
  </li>
  <li id="home" class="active">
    <a href="test.html">TEST</a>
  </li>
</ul>

Answer 1

আপনি -webkit-text-size-adjustCSS বৈশিষ্ট্যের মাধ্যমে এই আচরণটি অক্ষম করতে পারেন :

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

সাফারি ওয়েব সামগ্রী গাইডে এই সম্পত্তিটির ব্যবহারের আরও বর্ণনা দেওয়া আছে ।

Comments

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

— ম্যাট স্টিভেন্স

এই বৈশিষ্ট্যটি আইওএস 6 এ কাজ না করার seams করে। আপনি <meta content="viewport"মেটা ট্যাগ ব্যবহার করেও চেষ্টা করতে পারেন (নীচে দেখুন)

— ড্যান

আপনি যে আচরণটি চান তার পরিবর্তে ব্যবহার করবেন না none, ব্যবহার 100%করুন : blog.55minutes.com/2012/04/iphone-text-resizing

— fregante

এর জন্য আপনাকে ধন্যবাদ ... আমি ল্যান্ডস্কেপ এক্সডি-তে ফন্ট-সাইজিংয়ের মাধ্যমে কী চলছে তা বের করার চেষ্টা করছি

— জেফ শেভার

@ বিফ্রেড.ইট +1, আমি মনে করি যে এই পরিবর্তনটির সাথে এই উত্তরটি সম্পাদনা করা সার্থক হবে।

— মিং

Answer 2

দ্রষ্টব্য: আপনি যদি ব্যবহার করেন

html {
    -webkit-text-size-adjust: none;
}

তাহলে এটি ডিফল্ট ব্রাউজারগুলিতে জুম আচরণ অক্ষম করবে will আরও ভাল সমাধান হ'ল:

html {
    -webkit-text-size-adjust: 100%;
}

এটি ডেস্কটপের আচরণ পরিবর্তন না করে আইফোন / আইপ্যাড আচরণকে সংশোধন করে।

Answer 3

-উইবকিট-টেক্সট-আকার-সমন্বয়: কোনওটি নয়; সরাসরি এইচটিএমএলে সমস্ত ওয়েবকিট ব্রাউজারগুলিতে পাঠ্য জুম করার ক্ষমতাটি ভেঙে যায়। আপনার এটি আইওএসের জন্য নির্দিষ্ট সোম মিডিয়া প্রশ্নের সাথে একত্রিত করা উচিত। উদাহরণ স্বরূপ:

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: none;
     }
}

Comments

মজাদারভাবে যথেষ্ট আমি মিডিয়া ক্যোয়ারির ভিতরে ওয়েবেকিট সম্পত্তি রেখে কাজ করতে পেরেছি। ধন্যবাদ!

— zuallauz

Answer 4

যেমনটি আগে উল্লেখ করা হয়েছিল, সিএসএস নিয়ম

 -webkit-text-size-adjust: none

আধুনিক ডিভাইসে আর কাজ করে না।

ভাগ্যক্রমে, আইওএস 5 এবং আইওএস 6 এর জন্য একটি নতুন সমাধান আসে (টুডো: আইওএস 7 সম্পর্কে কী?) :

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

, user-scalable=0চিমটি জুমিং বন্ধ করতে আপনি যোগ করতে পারেন , যাতে আপনার ওয়েবসাইটটি কোনও দেশীয় অ্যাপের মতো আচরণ করে। ব্যবহারকারী জুম করার সময় যদি আপনার ডিজাইন ব্রেক হয় তবে পরিবর্তে এই মেটা ট্যাগটি ব্যবহার করুন:

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

Comments

ওয়েল, একটি ভাল প্রশ্ন এই মেটা ট্যাগটিতে কমা বা অর্ধিকোলন বিভাজক ব্যবহার করবেন কিনা! তবে এটি কাজ করে :)

— ড্যান

আমি কেবল <meta name="viewport" content="width=device-width, initial-scale=1.0">এটি কার্যকর করার জন্য প্রয়োজন ।

— ফক্সিনি

@ ফক্সিনি: ধন্যবাদ, উত্তরটি আপডেট করেছেন। আমি মনে করি এই 2 টি প্রথম মেটা ট্যাগগুলি প্রথম দিকে আইওএস সংস্করণগুলি থেকে অবহেলিত আবর্জনা ছিল

— ড্যান

Answer 5

আপনি এইচটিএমএল শিরোনামে একটি মেটা যুক্ত করতে পারেন:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Answer 6

আপনি সিএসএস রিসেট ব্যবহার করার জন্যও বেছে নিতে পারেন, যেমন নরমালাইজ.কম , যা ক্রেগ্রগ্রিংগো সুপারিশ করে একই নিয়মকে অন্তর্ভুক্ত করে:

/**
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

আপনি দেখতে পাচ্ছেন, এটিতে আইআই ফোনের জন্য বিক্রেতার নির্দিষ্ট নিয়মও অন্তর্ভুক্ত রয়েছে।

বিভিন্ন ব্রাউজারে বাস্তবায়ন সম্পর্কে বর্তমান তথ্যের জন্য , MDN রেফারেন্স পৃষ্ঠাটি দেখুন ।

Answer 7

নীচের কোডটি আমার পক্ষে কাজ করে।

html{-webkit-text-size-adjust: 100%;}

আপনার ব্রাউজার ক্যাশেটি যদি কাজ না করে তবে সাফ করার চেষ্টা করুন।

Answer 8

মার্চ পর্যন্ত 2019 টেক্সট আকার সমন্বয় হয়েছে মোবাইল ব্রাউজারে মধ্যে একটি যুক্তিসঙ্গত সমর্থন ।

body {
  text-size-adjust: none;
}

viewportমেটা ট্যাগ ব্যবহার করে পাঠ্যের আকারের সামঞ্জস্যের কোনও প্রভাব নেই এবং সেটিং user-scalable: no আইওএস সাফারিতেও কাজ করে না ।

Answer 9

আমার ক্ষেত্রে এই সমস্যাটি হয়েছে কারণ আমি width: 100%HTML ট্যাগের জন্য সিএসএস অ্যাট্রিবিউট ব্যবহার করেছি input type="text"।

আমি 60০ width% এর মান পরিবর্তন করে যুক্ত করেছি padding-right:38%।

input {
    padding-right: 38%;
    width: 60%;
}