কিছু ফন্ট আকারের সাফারি (আইফোন) এ আরও বড় আকারের রেন্ডার করা হয়েছে

110

সিএসএস বা সাফারি / আইফোন কিছু ফন্ট-আকারের সেটিংস উপেক্ষা করার কারণে অন্যান্য কারণ রয়েছে কি? আইফোনটিতে আমার বিশেষ ওয়েবসাইটটিতে সাফারি কিছু ফন্ট আকার দেয়: ফন্ট-আকারের চেয়ে বড় 13px পাঠ্য: 15px পাঠ্য। এটি সম্ভবত কিছু উপাদানগুলির ফন্ট-আকারকে সমর্থন করে না?

— অ্যালেক্স
সূত্র

248

জোয়ের প্রতিক্রিয়াতে এটিতে বেশ কয়েকটি ভাল অনুশীলন রয়েছে তবে আমি মনে করি যে সমস্যাগুলি আপনি কেন্দ্রগুলির বর্ণনা করছেন যে মোবাইল সাফারি স্বয়ংক্রিয়ভাবে পাঠ্যকে স্কেল করে যদি মনে করে যে পাঠ্যটি খুব কম রেন্ডার হবে। সিএসএস সম্পত্তি সহ আপনি এটি পেতে পারেন -webkit-text-size-adjust। এটি কেবলমাত্র আইফোনের জন্য আপনার শরীরে কীভাবে প্রয়োগ করতে হবে তার একটি নমুনা এখানে:

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}

— ডেভিড কানদা
সূত্র

2

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

— থ্রটলহেড

1

বাহ, অসুস্থ! আমাকে পাগল করে দিচ্ছে, আমি এটি খুঁজে পাওয়ার আগে এমনকি ক্লাসের নাম পরিবর্তন করে jQuery এর সাথে সিএসএস ইনলাইন সেট করার চেষ্টা করেছি। Lifesaver হয়!

— ক্রিস্টোফার বুবাচ

1

এটি অনেক সাহায্য করেছে। চিয়ার্স :)

— মৃত ম্যান

2

মিডিয়া ক্যোয়ারী ব্যবহার নিশ্চিত করুন। দেখে মনে হচ্ছে এটি কিছু পাঠ্যকে পড়তে অসুবিধা বোধ করতে পারে:

— -বেবকিট

9

উত্তরটিতে আপডেট করা উচিত -webkit-text-size-adjust: 100%- এটি স্বয়ংক্রিয় আপডেট এড়ানো হয়, তবে ব্যবহারকারীদের শুরু করা জুমকে অনুমতি দেয়। (উত্স)

— শান এরউখার্ট

14

কোনওটির পরিবর্তে 100% ব্যবহার করুন।

normalize.css অন্তর্ভুক্ত

— user3276706
সূত্র

11

এছাড়াও, নিশ্চিত হয়ে নিন যে আপনি আপনার ভিউপোর্ট মেটা ট্যাগে প্রাথমিক জুম সেটিংস 1 এ সেট করছেন:

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

— johnpolacek
সূত্র

7

আমি পিক্সেল সংজ্ঞা আর ব্যবহার করি না কারণ সেগুলি সত্যই বিভ্রান্তিকর এবং ভিজ্যুয়াল পরিষেবাগুলিতে হুবহু এক নয়।

ইউনিটগুলির সাথে মিলিত হন

"এমস" (এম): "ইম" একটি স্কেলযোগ্য ইউনিট যা ওয়েব ডকুমেন্ট মিডিয়াতে ব্যবহৃত হয়। একটি ইমাম বর্তমান ফন্টের আকারের সমান, উদাহরণস্বরূপ, যদি নথির ফন্ট-আকার 12pt হয়, 1 মিম 12pt এর সমান। ইএমগুলি প্রকৃতির আকারে স্কেলেবল হয়, সুতরাং 2 মেম্বার 24pt, .5 এমপি 6pt এর সমান হয় etc.
পিক্সেল (পিক্সেল): পিক্সেলগুলি স্থির আকারের ইউনিট যা স্ক্রিন মিডিয়াতে ব্যবহৃত হয় (অর্থাত্ কম্পিউটারের স্ক্রিনে পড়তে হবে)। কম্পিউটারের স্ক্রিনে একটি পিক্সেল একটি ডটের সমান (আপনার স্ক্রিনের রেজোলিউশনের ক্ষুদ্রতম বিভাগ)। অনেক ওয়েব ডিজাইনার ব্রাউজারে রেন্ডার হওয়ার সাথে সাথে তাদের সাইটের পিক্সেল-নিখুঁত উপস্থাপনা তৈরি করতে ওয়েব ডকুমেন্টগুলিতে পিক্সেল ইউনিট ব্যবহার করে। পিক্সেল ইউনিটের একটি সমস্যা হ'ল এটি দৃষ্টি প্রতিবন্ধী পাঠকদের জন্য মোবাইলের ডিভাইসগুলির সাথে ফিট করার জন্য উপরের দিকে স্কেল করে না।
পয়েন্ট (পিটি): পয়েন্টগুলি প্রিন্ট মিডিয়াতে প্রথাগতভাবে ব্যবহৃত হয় (কাগজে মুদ্রিত হওয়ার জন্য যে কোনও কিছু)। একটি বিন্দু একটি ইঞ্চির 1/72 এর সমান। পয়েন্টগুলি অনেকটা পিক্সেলের মতো, এটি নির্দিষ্ট আকারের ইউনিট এবং আকারে স্কেল করতে পারে না।
শতাংশ (%): শতাংশ ইউনিট অনেকটা "Em" ইউনিটের মতো, কয়েকটি মৌলিক পার্থক্যের জন্য সংরক্ষণ করে। প্রথম এবং সর্বাগ্রে, বর্তমান ফন্টের আকারটি 100% (অর্থাৎ 12pt = 100%) এর সমান। শতাংশ ইউনিট ব্যবহার করার সময়, আপনার পাঠ্য মোবাইল ডিভাইসগুলির জন্য এবং অ্যাক্সেসযোগ্যতার জন্য পুরোপুরি স্কেলযোগ্য।

4

উত্তরটি হ'ল পাঠ্যটির জন্য 1 পূর্বনির্ধারিত ইউনিট (অর্থাত 12pt) এবং তারপরে সমস্ত সিএসএসের স্পেসিফিকেশনের জন্য ফন্ট-আকার ব্যবহার করুন: 90%; বা হরফ-আকার: 110%; ইত্যাদি ইত্যাদি এটি আপনার সমস্ত সমর্থিত ডিভাইসের জন্য আরও সহজেই অ্যাক্সেসযোগ্য।

1

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

— অ্যান্ড্রু সুইফট

3

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

— রাউলি রাজান্দে

0

আমার একই সমস্যা ছিল, মূল সিএসএসে এই লাইনটি ছিল:

-উইবকিট-টেক্সট-আকার-সমন্বয়: 120%;

আমাকে এটি 100% এ পরিবর্তন করতে হয়েছিল, এবং সবকিছু মসৃণ ছিল। সমস্ত px এমে বা %% এ পরিবর্তন করার দরকার নেই।

— me1974
সূত্র

ডিজাইনার যাইহোক ফন্ট মাপ জন্য ইম ব্যবহার করা উচিত।

— নিক টার্নার

2

... বডি ট্যাগ সিএসএস বাদে যেখানে কোনও পিক্সেল আকার সবচেয়ে ভাল।

— ম্যাট পার্কিন্স

0

আপনি যে উপাদানগুলির দ্বারা হেরফের করছেন সেগুলিতে আপনার "প্রস্থ / উচ্চতা" সেট নেই কিনা তাও পরীক্ষা করুন, সাফারি এসভিজি-র ক্রম এবং এফএফ-তে ফন্টের আকারের চেয়ে বড় আকারকে অগ্রাধিকার দেয়, মনে হয় বর্তমানে কমপক্ষে।

— marebuffi
সূত্র