মোবাইল ওয়েবের জন্য সর্বোচ্চ-ডিভাইস-প্রস্থ এবং সর্বোচ্চ-প্রস্থের মধ্যে পার্থক্য কী?

Question

আইফোন / অ্যান্ড্রয়েড ফোনের জন্য আমার কয়েকটি এইচটিএমএল পৃষ্ঠা বিকাশ করা দরকার তবে এর মধ্যে max-device-widthএবং এর মধ্যে পার্থক্য কী max-width? বিভিন্ন স্ক্রিন আকারের জন্য আমার বিভিন্ন সিএসএস ব্যবহার করতে হবে।

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

পার্থক্য কি?

Comments

সম্পর্কিত: আমার কি সর্বোচ্চ-ডিভাইস-প্রস্থ বা সর্বোচ্চ-প্রস্থ ব্যবহার করা উচিত?

— জোশ ক্রোজিয়ার

আমি খুঁজে পেয়েছি যে ট্যাগটি ছোট পর্দার ডিভাইসের জন্য অন্তর্ভুক্ত না করা এবং ট্যাগ ছাড়া কাজ না max-device-widthকরে এমনকি কাজ করে<meta name="viewport" ...>max-widthmeta

— ফাইজান আকরাম দার

Answer 1

max-width লক্ষ্য প্রদর্শন ক্ষেত্রের প্রস্থ, যেমন ব্রাউজার

max-device-width ডিভাইসের পুরো রেন্ডারিং এরিয়া, অর্থাৎ প্রকৃত ডিভাইস স্ক্রিনের প্রস্থ

একই জন্য max-heightএবং max-device-heightপ্রাকৃতিকভাবে যায় ।

Comments

আপনি যদি নিজের ব্রাউজারটির আকার পরিবর্তন করতে চান তবে পরিবর্তনটি দেখতে চান, বিকাশের জন্য সর্বাধিক প্রস্থ ব্যবহার করুন, যদিও সর্বাধিক ডিভাইস-প্রস্থ উত্পাদনের জন্য আরও সঠিক।

— জন ম্যাগনোলিয়া

@ জোহনম্যাগনোলিয়া আপনাকে কী মনে করে যে সর্বাধিক ডিভাইস প্রস্থ উত্পাদন জন্য ভাল? ডিভাইস নির্বিশেষে সর্বাধিক প্রস্থের গ্যারান্টি কি আরও ভাল সাড়া জাগাতে পারে না?

— e_علوم

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

— জেসন

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

— টুইনপ্রাইমস আরিজেজ

যদি আপনি মোবাইল ডিভাইসগুলির জন্য একেবারে আলাদা লেআউট পেয়ে থাকেন তবে সম্ভবত মৌলিক কারণ হ'ল মাউস কার্সার নেই (তাদের কাছে স্ক্রোল করার জন্য বড় বোতাম এবং একটি একক কলাম প্রয়োজন)। সেই ক্ষেত্রে ব্যবহারের জন্য একটি দুর্দান্ত মিডিয়া ক্যোয়ারী হ'ল @media screen and (pointer: coarse) and (hover: none)এটি ভবিষ্যতে কত পিক্সেল মোবাইল ডিভাইসগুলি তাদের স্ক্রিনে প্যাক করে তা নির্বিশেষে মোবাইল সংস্করণে স্যুইচ করবে।

— ইওগানম

Answer 2

max-widthভিউপোর্টের প্রস্থকে বোঝায় এবং এর সাথে মিলে নির্দিষ্ট আকার বা অভিযোজন লক্ষ্য করতে ব্যবহৃত হতে পারে max-height। একাধিক max-width(বা min-width) শর্তাদি ব্যবহার করে আপনি ব্রাউজারের আকার পরিবর্তন করা বা আইফোনের মতো ডিভাইসে ওরিয়েন্টেশন পরিবর্তনের কারণে পৃষ্ঠা স্টাইল পরিবর্তন করতে পারে।

max-device-widthওরিয়েন্টেশন, বর্তমান স্কেল বা পুনরায় আকার নির্বিশেষে ডিভাইসের ভিউপোর্ট আকারকে বোঝায়। এটি কোনও ডিভাইসে পরিবর্তন হবে না তাই স্ক্রিনটি ঘোরানো বা পুনরায় আকার দেওয়ার কারণে স্টাইল শীট বা সিএসএসের নির্দেশাবলী স্যুইচ করতে ব্যবহার করা যাবে না।

Comments

এই উত্তরটি আমার কাছে গ্রহণযোগ্য উত্তরের চেয়ে ভাল "ক্লিক" করেছে। এটি বেশিরভাগ অ্যাপ্লিকেশনগুলির মতো লাগে max-widthএবং max-heightএটি ব্যবহার করা হবে।

— হটশট 309

: @JackieChiles অন্য তাই থ্রেড একটি ভাল পয়েন্ট যে এক (বৃহত্তর ডিভাইসের প্রকাশমান মোবাইল শৈলী সংক্রান্ত) বিবেচনা করা উচিত তোলে stackoverflow.com/questions/8564752/...

— hotshot309

এই উত্তরের উত্তরটি সম্পূর্ণ নয়: ওরিয়েন্টেশন অ্যান্ড্রয়েডে ডিভাইস-প্রস্থ এবং ডিভাইস-উচ্চতা অদলবদল করে তবে আইওএস নয়: দেখুন quirksmode.org/blog/archives/2010/04/the_orientation.html ।

Answer 3

আপনি এই স্টাইল ব্যবহার সম্পর্কে কি মনে করেন?

সমস্ত ব্রেকপয়েন্টের জন্য যা বেশিরভাগ আমি ব্যবহার করি "মোবাইল ডিভাইস" min(max)-device-widthএবং ব্রেকপয়েন্টগুলির জন্য যা বেশিরভাগ "ডেস্কটপ" ব্যবহারের জন্য min(max)-width।

অনেকগুলি "মোবাইল ডিভাইস" রয়েছে যা প্রস্থকে খারাপভাবে গণনা করে।

এ http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml :

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */
}

Comments

প্রশ্নের উত্তর দেয় না এবং এটি আপনার ব্রেকপয়েন্টগুলিতে কাজ করার জন্য একটি খারাপ উপায় - সতর্কতা অবলম্বন করুন।

— চল্লিশ

Answer 4

সর্বাধিক ডিভাইস-প্রস্থ ডিভাইস রেন্ডারিং প্রস্থ

@media all and (max-device-width: 400px) {
    /* styles for devices with a maximum width of 400px and less
       Changes only on device orientation */
}

@media all and (max-width: 400px) {
    /* styles for target area with a maximum width of 400px and less
       Changes on device orientation , browser resize */
}

সর্বাধিক প্রস্থটি লক্ষ্য প্রদর্শন ক্ষেত্রের প্রস্থের অর্থ ব্রাউজারের বর্তমান আকার।

Comments

@ মিডিয়া সব এবং (সর্বাধিক প্রস্থ: 400px) the the কী পার্থক্য

— ভাইসার

Answer 5

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

Answer 6

সর্বোচ্চ-প্রস্থ হ'ল লক্ষ্য প্রদর্শন ক্ষেত্রের প্রস্থ, যেমন ব্রাউজার; সর্বাধিক ডিভাইস-প্রস্থ ডিভাইসের পুরো রেন্ডারিং অঞ্চল, অর্থাৎ প্রকৃত ডিভাইস স্ক্রিনের প্রস্থ।

; আপনি যদি সর্বোচ্চ-ডিভাইস-প্রস্থ ব্যবহার করেন , আপনি যখন আপনার ডেস্কটপে ব্রাউজার উইন্ডোর আকার পরিবর্তন করেন, সিএসএস স্টাইলটি বিভিন্ন মিডিয়া ক্যোয়ারী সেটিংয়ে পরিবর্তন করবে না;

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

Answer 7

যদি আপনি ক্রস-প্ল্যাটফর্ম অ্যাপ্লিকেশন তৈরি করে থাকেন (যেমন, ফোনগ্যাপ / কর্ডোভা ব্যবহার করে) তবে,

ডিভাইস-প্রস্থ বা ডিভাইস-উচ্চতা ব্যবহার করবেন না। বরং সিএসএস মিডিয়া ক্যোয়ারিতে প্রস্থ বা উচ্চতা ব্যবহার করুন কারণ অ্যান্ড্রয়েড ডিভাইস ডিভাইস-প্রস্থ বা ডিভাইস-উচ্চতায় সমস্যা দেবে। আইওএসের জন্য এটি দুর্দান্ত কাজ করে। কেবল অ্যান্ড্রয়েড ডিভাইসই ডিভাইস-প্রস্থ / ডিভাইস-উচ্চতা সমর্থন করে না।

Answer 8

ডিভাইস-প্রস্থ / উচ্চতা আর ব্যবহার করবেন না।

: ডিভাইস-প্রস্থ, ডিভাইস-উচ্চতা ও ডিভাইস দৃষ্টিভঙ্গি-অনুপাত মিডিয়া কুয়েরি শ্রেনী 4 অবচিত হয় https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

নির্দিষ্ট ডিভাইসগুলিকে টার্গেট করার জন্য ওরিয়েন্টেশন এবং (মিনিট / সর্বোচ্চ-) রেজোলিউশনের সংমিশ্রণে প্রস্থ / উচ্চতা (কমপক্ষে / সর্বোচ্চ ছাড়াই) ব্যবহার করুন। মোবাইলের প্রস্থে / উচ্চতায় ডিভাইস-প্রস্থ / উচ্চতার সমান হওয়া উচিত।

Comments

প্লেইন "ডিভাইস-এক্সএক্সএক্সএক্সএক্স" আইটেমগুলি অবচয় করা হয়েছে, "সর্বাধিক ডিভাইস-এক্সএক্সএক্সএক্সএক্স" আইটেমগুলি হ্রাস করা হয়নি।

— রজার ক্রুয়েজার

আপনি কি এটি সম্পর্কে নিশ্চিত? সর্বোচ্চ-ডিভাইস-এক্সএক্সএক্সএক্স মিডিয়া কোয়েরিগুলি হ্রাস করা হয়নি তা বোঝানোর জন্য আমি কিছুই দেখতে পাচ্ছি।

— জনি কুক