আইফোন 5 সিএসএস মিডিয়া ক্যোয়ারী

Question

আইফোন 5 এর দীর্ঘ স্ক্রিন রয়েছে এবং এটি আমার ওয়েবসাইটের মোবাইল ভিউটি ধরছে না। আইফোন 5 এর জন্য নতুন প্রতিক্রিয়াশীল নকশার প্রশ্নগুলি কী কী এবং আমি বিদ্যমান আইফোন প্রশ্নের সাথে একত্রিত করতে পারি?

আমার বর্তমান মিডিয়া ক্যোয়ারীটি হ'ল:

@media only screen and (max-device-width: 480px) {}

Comments

আমরা কি আপনার বিদ্যমান মিডিয়া প্রশ্নগুলি দেখতে পারি?

— BoltClock

এটা চেষ্টা কর? halgatewood.com/iphone-5-media-query

— sachleen

Answer 1

আর একটি দরকারী মিডিয়া বৈশিষ্ট্য হ'ল device-aspect-ratio।

নোট করুন আইফোন 5 এর 16: 9 টির অনুপাত নেই । এটি আসলে 40:71।

আইফোন <5:
@media screen and (device-aspect-ratio: 2/3) {}

আইফোন 5:
@media screen and (device-aspect-ratio: 40/71) {}

আইফোন 6:
@media screen and (device-aspect-ratio: 375/667) {}

আইফোন 6 প্লাস:
@media screen and (device-aspect-ratio: 16/9) {}

আইপ্যাড:
@media screen and (device-aspect-ratio: 3/4) {}

তথ্যসূত্র:
মিডিয়া ক্যোয়ারী @ ডাব্লু 3 সি
আইফোন মডেল তুলনা দিক
অনুপাত ক্যালকুলেটর

Comments

আমি এই পদ্ধতির পছন্দ করি তবে স্টিফেন স্প্রোল zsprawl.com/iOS/2012/09/css-media-queries- এর ব্যাখ্যা অনুসারে -webkit-min- ডিভাইস-পিক্সেল-অনুপাত যোগ না করা পর্যন্ত ফোনগ্যাপ অ্যাপ ওয়েবভিউতে এটি কাজ করতে পারিনি for -আইফোন -5 । @ মিডিয়া স্ক্রিন এবং (ডিভাইস-দিক-অনুপাত: 40/71) এবং (-উইবকিট-মিনিট-ডিভাইস-পিক্সেল-অনুপাত: 2) te // টেলিফোনগুলির জন্য আইফোন 5 e

— 21

আমি যোগ করতে ছিল and (-webkit-min-device-pixel-ratio: 2)আইফোন 5 মিডিয়া ক্যোয়ারীতে এটা PhoneGap WebView কাজ যেমন @TaeKwonJoe বলেছেন করতে

— মহেন্দ্র Liya

আইফোন 6 অন্তর্ভুক্ত করতে এটি আপডেট করার জন্য আপনাকে ধন্যবাদ!

— ম্যাভেরিক

আমার সিএসএসে আইফোন 4 এবং আইফোন 5 আলাদা করার দরকার হলে এটি বেশ ভাল কাজ করে।

— ইউকাস

আইফোন 6 এর জন্য, (ডিভাইস-দিক-অনুপাত: 667/375) বাস্তব শারীরিক আইফোন 6 এ কাজ করে নি 6. এটি আইওএস সিমুলেটারে যদিও কাজ করেছিল। আমি এটিকে 375/667 এ পরিবর্তন করেছি এবং এটি দৈহিক ডিভাইসে কাজ করেছে।

— এখনই

Answer 2

এটি এই, যা আমি এই ব্লগে জমা করি :

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

মনে রাখবেন এটি আইফোন 5 এর প্রতিক্রিয়া জানায়, উল্লিখিত ডিভাইসে ইনস্টল করা বিশেষ আইওএস সংস্করণে নয়।

আপনার বিদ্যমান সংস্করণটির সাথে একত্রীকরণের জন্য, আপনি সেগুলি কমা-সীমাবদ্ধ করতে সক্ষম হবেন:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

এনবি: আমি উপরের কোডটি পরীক্ষা করে দেখিনি, তবে আমি @mediaআগে কমা- বিস্মৃত প্রশ্নগুলি পরীক্ষা করেছি , এবং তারা ঠিক কাজ করে।

নোট করুন যে উপরেরগুলি গ্যালাক্সি নেক্সাসের মতো অনুরূপ অনুপাতগুলি ভাগ করে এমন কিছু অন্যান্য ডিভাইসগুলিতে আঘাত করতে পারে। এখানে একটি অতিরিক্ত পদ্ধতি রয়েছে যা কেবলমাত্র এমন ডিভাইসগুলিকে টার্গেট করবে যেখানে 640px (কিছু অদ্ভুত ডিসপ্লে-পিক্সেল ব্যঙ্গতার কারণে 560px) এবং 960px (আইফোন <5) এবং 1136px (আইফোন 5) এর মধ্যে একটির একটি মাত্রা রয়েছে।

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

Comments

আপনি কি পরামর্শ দিতে পারেন যে আমি কীভাবে আমার জিজ্ঞাসাটি আমার পুরানো সাথে আইফোন 4 এবং 5 উভয়কেই একত্রিত করতে পারি?

— ম্যাভেরিক

এটি কেবলমাত্র আইফোনগুলিতেই নয় - অন্যান্য ফোনের ক্ষেত্রেও এটি কার্যকর হবে Care স্যামসাং গ্যালাক্সি নেক্সাস হবার একটি উদাহরণ।

— মাইক সুইনি

@ মাইকসুইনাই ভাল কল আমি আমার পোস্টটিকে একটি নতুন পদ্ধতি দিয়ে আপডেট করেছি যাতে অন্যান্য ডিভাইসগুলি অন্তর্ভুক্ত করা উচিত নয়।

— এরিক 18 ই

@ এরিক অনেকটা ক্রস ফোন টেস্টিংয়ের পরে মীমাংসা করে ফেলতে পেরেছিলাম - মিশ্রণের উচ্চতা আনতে হয়েছিল! আমার পরীক্ষা করা 7-8 টি বিভিন্ন ফোন জুড়ে দুর্দান্ত কাজ করছে বলে মনে হচ্ছে।

— মাইক সুইনি

এই লাইন ঠিক কিনা: iPhone 5 and not to iOS 6? এটি হওয়া উচিত: "আইফোন 5 এবং আইফোন 6 এ নয়"?

— স্নাগল

Answer 3

উপরের তালিকাভুক্ত এই সমস্ত উত্তর, যেগুলি ব্যবহার করে max-device-widthবা max-device-heightমিডিয়া প্রশ্নের জন্য, খুব শক্তিশালী বাগ থেকে ভোগে: তারা অন্যান্য জনপ্রিয় মোবাইল ডিভাইসগুলিকেও লক্ষ্য করে (সম্ভবত অযাচিত এবং কখনও পরীক্ষিত হয় নি, বা এটি ভবিষ্যতে বাজারে আসবে)।

এই কোয়েরিগুলি এমন কোনও ডিভাইসের জন্য কাজ করবে যার ছোট স্ক্রিন রয়েছে এবং সম্ভবত আপনার নকশাটি ভেঙে যাবে।

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

দয়া করে সচেতন হন যে একমাত্র মিডিয়া ক্যোয়ারী সর্বদা আইফোন 5 কে লক্ষ্য করে এবং অন্য কিছুই নয় :

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

নোট করুন যে সঠিক প্রস্থ এবং উচ্চতা, সর্বোচ্চ-প্রস্থ এখানে চেক করা হয়নি।

---

এখন, সমাধান কি? আপনি যদি এমন কোনও ওয়েবপৃষ্ঠা লিখতে চান যা সমস্ত সম্ভাব্য ডিভাইসে ভাল দেখায়, আপনার অবক্ষয় সবচেয়ে ভাল ব্যবহার use

/ * অবক্ষয়ের প্যাটার্নটি আমরা কেবলমাত্র স্ক্রিনের প্রস্থই যাচাই করে দেখছি, এটি পরিবর্তিত হবে প্রতিকৃতি থেকে ল্যান্ডস্কেপে পরিণত হচ্ছে * /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

যদি আপনার ওয়েবসাইটের 30% এরও বেশি দর্শক মোবাইল থেকে আসে তবে মোবাইল-প্রথম অ্যাপ্রোচ সরবরাহ করে এই স্কিমটিকে উল্টো দিকে ঘুরিয়ে দিন। সেক্ষেত্রে ব্যবহার করুন min-device-width। এটি মোবাইল ব্রাউজারগুলির জন্য ওয়েবপৃষ্ঠা উপস্থাপনের গতি বাড়িয়ে তুলবে।

Comments

আমি প্রথমে প্রগতিশীল বর্ধন এবং মোবাইল যাব। এটি মোবাইল দিয়ে শুরু হচ্ছে এবং ন্যূনতম ডিভাইস-প্রস্থ ব্যবহার করে তৈরি করা হবে।

— প্রাইভেরা 133

এছাড়াও মনে রাখবেন যে উচ্চতা / প্রস্থ / পিক্সেল-অনুপাতের সমাধান যা কেবলমাত্র আইফোন 5 এর সাথে মেলে তা পরবর্তী ফোনের সাথেও মিলবে যা প্রদর্শিত হবে যা একই বৈশিষ্ট্যযুক্ত বলে মনে হয়। আপনার উত্তরের সামগ্রিক থিমটি সঠিক: নির্দিষ্ট ডিভাইসের নিরিখে চিন্তা করা অগ্রসর হওয়ার ভুল উপায়।

— পয়েন্টি

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

— দিমিত্রি ভোরন্টজভ 10'13 এ

@ ড্যান - আপনার পরামর্শ বাস্তবায়নের চেষ্টা করছেন, কিছু কাজ করছে না। আমি দয়া করে আপনাকে একবার দেখার জন্য জিজ্ঞাসা করতে পারি: stackoverflow.com/questions/16486078/…

— দিমিত্রি ভোরন্টজভ

@ প্রাইমভেরা, দয়া করে কেন বলুন। একটি মোবাইল প্রথম পদ্ধতির সুবিধা কি?

— এস ..

Answer 4

আমার জন্য, ক্যোয়ারীটি কাজটি করেছিল তা হ'ল:

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

Answer 5

আইফোন 5 পোর্ট্রেট এবং ল্যান্ডস্কেপ এ

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

ল্যান্ডস্কেপ আইফোন 5

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

আইফোন 5 প্রতিকৃতি

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

Comments

আপনার max-device-width : 568pxপ্রতিকৃতিতে কেন দরকার ?

— adi518

@ adi518 আপনি যদি সর্বোচ্চ প্রস্থ না ব্যবহার করেন তবে 320px এর বেশি ডিভাইসের জন্য সিএসএস বিধি প্রয়োগ করা হয় যা আক্ষরিক অর্থে বেশিরভাগ ডিভাইস - ট্যাবলেট ডেস্কটপ ইত্যাদির মতো হয়

— সুধিয়ার

device-width: 320px and device-height: 568pxপরিবর্তে ব্যবহার করবেন না কেন ?

— adi518

Answer 6

কোনও প্রতিক্রিয়া আমার পক্ষে ফোনগ্যাপ অ্যাপটিকে লক্ষ্য করে কাজ করে না।

নিম্নলিখিত লিঙ্ক পয়েন্ট হিসাবে , নীচের সমাধান কাজ করে।

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

Answer 7

আমি কয়েকটি বিকল্প যাচাই করে যাচ্ছি এবং খুব তাড়াতাড়ি যোগ হয়েছে this আপনার পৃষ্ঠায় রয়েছে তা নিশ্চিত করুন:

<meta name="viewport" content="initial-scale=1.0">

Answer 8

মোবাইল ডিভাইসের জন্য মিডিয়া ফিচার ডেটাবেজে অন্যান্য স্মার্টফোনের পাশাপাশি আপনি আইফোন 5 এর জন্য মোটামুটি সহজেই নিজের উত্তরটি পেতে পারেন:

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

এমনকি একই ওয়েবসাইটে পরীক্ষার পৃষ্ঠায় আপনার নিজের ডিভাইসের মানগুলি পেতে পারেন।

(অস্বীকৃতি: এটি আমার ওয়েবসাইট)

Answer 9

আফাইক কোনও আইফোন 1.5 পিক্সেল অনুপাত ব্যবহার করে না

আইফোন 3 জি / 3 জিএস: (-উইবকিট-ডিভাইস-পিক্সেল-অনুপাত: 1) আইফোন 4 জি / 4 জিএস / 5 জি: (ওয়েবেকিট-ডিভাইস-পিক্সেল-অনুপাত: 2)

Answer 10

/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

Answer 11

সমস্ত আইফোন ধরতে আপনার "-webkit-min-ডিভাইস-পিক্সেল-অনুপাত" 1.5 কে নেমে যেতে হবে?

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}

Comments

কোন আইফোন 1.5 ডিভাইসের পিক্সেল অনুপাত ব্যবহার করছে?

— BoltClock

আমি ডিভাইসের প্রস্থের উপর নির্ভর করে, এবং ডিভাইসের নাম (আইফোন) না করে মিডিয়া ক্যোয়ারীগুলি করার জন্য সুপারিশ করি। আইফোন 5 এর আরও প্রস্থ থাকলে, কেবল এটি ব্যবহারযোগ্য করে তোলেন।

— টম রোগেরো