এইচটিটিপি শিরোনামগুলিতে ডিভাইস রেজোলিউশন, পিক্সেল ঘনত্ব ইত্যাদি অন্তর্ভুক্ত হয় না কেন?

Question

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

Comments

আপনি এটি জাভাস্ক্রিপ্টের মাধ্যমে পাঠাতে এবং তারপরে একটি সিএসএস ফাইল সাইডেলোড করতে পারেন। আমি মনে করি সমস্যাটি হ'ল,

— সমাধানটি

এটি আরডাব্লুডি নয়। আপনি এই পৃষ্ঠাটি রিফ্রেশ না করলে Those এইচটিএমএল / সিএসএস আপনাকে কোনও প্রতিক্রিয়াশীল প্রভাব দেয় না।

— মাহদি

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

— জেফ ল্যাঙ্গেমিয়ার

কোনও চিত্র ছাড়াই কোনও সফ্টওয়্যার যদি কোনও ব্রাউজারের পরিবর্তে আপনার এইচটিএমএল জন্য জিজ্ঞাসা করে তবে কী হবে? যেমন পর্দা পাঠক? বা একটি টার্মিনাল ভিত্তিক ব্রাউজার?

— জ্যাক

Answer 1

সংক্ষেপে, ওয়াইল্ড ওয়াইল্ড ওয়েব কীভাবে কাজ করার জন্য ডিজাইন করা হয়েছিল তা তা নয়।

মূল নকশাটি হ'ল এইচটিএমএলটি ব্রাউজারটিকে দস্তাবেজ সম্পর্কে ইঙ্গিত দেয়। কোন বিট জোর দেওয়া, ইমেজ ফাইল পেতে কোথায় যেতে হবে। ফন্ট সম্পর্কে সিদ্ধান্ত (সেইসাথে কোন আকার) ব্রাউজার এবং স্থানীয় কনফিগারেশন সেটিংসের কাজ ছিল।

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

Comments

আমি বলব যে আজও এটি ডিভাইসের কাজ হওয়া উচিত। কয়েকটি ভিন্ন ভিন্ন ন্যূনতম সিএসএস সেট সেট আপ করুন এবং সেখান থেকে ডিভাইসগুলিকে এটি পরিচালনা করতে দিন।

— জেফ ল্যাঙ্গেমিয়ার

@ জেফল্যাঞ্জেমিয়ার পুরোপুরি একমত এমনকি এই উত্তরটি সংক্ষেপে সঠিক, তবে এটি আরডাব্লুডির কথা বলছে না।

— মাহদি

হতে পারে একটি নতুন ওয়েব ফর্ম্যাটকে নতুন করে ডিজাইন করার সময় যা কন্টেন্টকে ডিজাইন থেকে সম্পূর্ণ আলাদা করে দেয় :)

— eliocs

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

— জেফ ল্যাঙ্গেমিয়ার

@ এলিয়োকস রয়েছে, একে বলা হয় এইচটিএমএল এবং সিএসএস। এইচটিএমএল হল কাঠামো, এবং সিএসএস হ'ল নকশা। অথবা আপনি যদি নিজের ডিজাইন থেকে সামগ্রিক সামগ্রী পৃথক করতে চান তবে পিএইচপি, পাইথনে

— জ্যাঙ্গো

Answer 2

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

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

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

Comments

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

— eliocs

@ ইলিয়োকস আপনি ঠিক বলেছেন, চিত্রগুলির জন্য আসলে এটি একটি গুরুত্বপূর্ণ বিষয়। সংশোধনীর জন্য ধন্যবাদ.

— মাহদী

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

— মনোক্রোম

Answer 3

আপনি কি নিশ্চিত যে আপনি প্রতিক্রিয়াশীল ডিজাইন করছেন? প্রতিক্রিয়াশীল নকশা প্রযুক্তিগতভাবে তরল নকশা এবং মিডিয়া প্রশ্নের সমন্বয়।

কীভাবে আপনি জিনিসপত্র রাখেন সে সম্পর্কে যদি আপনি স্মার্ট হন তবে আপনার জন্য ফ্লুয়েড ডিজাইন 90% ভিউপোর্টের সমস্যার সমাধান করে। মিডিয়া ক্যোয়ারীগুলি বর্তমান মাত্রাগুলির উপর ভিত্তি করে গ্রিড বৈশিষ্ট্যগুলি পরিবর্তন করে আপনি অন্য 10% পান।

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

আমার পরামর্শ: ডেস্কটপ ল্যান্ডস্কেপ, আইপ্যাডের প্রতিকৃতি এবং ল্যান্ডস্কেপ, আইফোনের প্রতিকৃতি এবং ল্যান্ডস্কেপ - এর মতো তিন বা চারটি পৃথক "নামমাত্র রেজোলিউশন এবং ওরিয়েন্টেশন" তৈরি করুন এবং এটিকে আপনার ওয়্যারফ্রেম হিসাবে কাজ করার জন্য বিবেচনা করুন। তারপরে সেই বিরতির জন্য আপনার মিডিয়া ক্যোয়ারী সেট আপ করুন। তারপরে তরল লেআউটগুলি ব্যবহার করে এটি সম্পাদন করতে সত্যিই কঠোর পরিশ্রম করুন - সম্ভবত কোনও কোনও সিএসএস গ্রিডের সাথে (তাদের মধ্যে কয়েক ডজন রয়েছে আপনার জন্য প্রাক বিল্ট, বা আপনি নিজের রোল করতে পারেন)।

Answer 4

যদি আপনার কাছে একটি ডায়নামিক ওয়েবসাইট রয়েছে যা সামগ্রীটি আনে, এর মতো একটি কোড কৌশলটি করবে (ES6 এ):

var headers = new Headers();
    headers.set('window-w', window.innerWidth);  // or $('html').width()  with jQuery
    headers.set('window-h', window.innerHeight); // or $('html').height() with jQuery
fetch(url, {'credentials': 'include', 'headers': headers})
.then(function(response) {
    ...

দ্রষ্টব্য: 'শংসাপত্রগুলি' সেশন কুকির জন্য

তারপরে আপনি সেই শিরোনামগুলির সার্ভার-সাইডটি উদাহরণ সহ (পিএইচপিতে) পড়তে পারেন:

$headers = getallheaders();
if (isset($headers['window-w']) and isset($headers['window-h'])) {
    $window_w = 1 * $headers['window-w'];
    $window_h = 1 * $headers['window-h'];
    if ($window_w * $window_h > 0) {
        ...

Comments

এটি এখন একমাত্র সঠিক উত্তর।

— মার্ভিন্দানিগ

Answer 5

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

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