আমি কীভাবে সিএসএস দিয়ে একটি সম্পূর্ণ ওয়েব পৃষ্ঠাকে স্কেল করতে পারি?

Question

ফায়ারফক্স ব্যবহার করে, আপনি কেবল চাপ দিয়ে একটি সম্পূর্ণ ওয়েব পৃষ্ঠা বড় করতে পারেন CTRL +। এটি যা করে তা আনুপাতিকভাবে পুরো ওয়েব পৃষ্ঠাটি (ফন্ট, চিত্র, ইত্যাদি) বড় করে তোলা।

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

এর মতো কিছু আছে page-size: 150%(যা পুরো পৃষ্ঠার অংশগুলিকে x% দ্বারা বাড়িয়ে তুলবে?)

Comments

ফায়ারফক্সের পৃষ্ঠা জুম বৈশিষ্ট্যটি প্রতিটি আধুনিক ব্রাউজারে উপস্থিত হয় - প্রতিলিপিগুলি এটি অর্থহীন বলে মনে হয়।

— কুইন্টিন

আমি ডেভিডের সাথে একমত। এটি অনুলিপি করা এক ধরণের অর্থহীন বলে মনে হচ্ছে যেহেতু এখনকার দিনগুলিতে ব্রাউজারগুলির মধ্যে এই বৈশিষ্ট্যটি অন্তর্নির্মিত থাকে ....

— ব্যবহারকারী

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

— ডিএ

এটি এটি প্রতিলিপি না। এটি এম্বেডড ডিভিতে কোনও পৃষ্ঠা / উপাদান পূর্বরূপের মতো কোনও কিছুর জন্য কার্যকর হতে পারে।

— রিচিএইচএইচ

পৃষ্ঠা ডিজাইনারকে তার পৃষ্ঠার জন্য একটি ডিফল্ট জুম সেট করতে সক্ষম হওয়া উচিত। আমার তৈরি পৃষ্ঠাটি তৈরি করার সময় আমার কাছে এটি একটি বড় ছিল, তবে উচ্চ রেজোলিউশনের ডিসপ্লেগুলির কারণে এখন ছোট: ল্যানিবেস্ট.com / কার্ডট্রিক পৃষ্ঠাটি পুনরায় তৈরি করার পরিবর্তে, আমি ডিফল্টরূপে জুম করতে চাই।

— লনি সেরা

Answer 1

আপনি সিএসএস zoomসম্পত্তি ব্যবহার করতে সক্ষম হতে পারেন - আইই 5.5+, অপেরা, এবং সাফারি 4, এবং Chrome এ সমর্থিত

আমি কি ব্যবহার করতে পারি: সিএসএস জুম

ফায়ারফক্স একমাত্র প্রধান ব্রাউজার যা জুমকে সমর্থন করে না ( এখানে বাগজিলা আইটেমটি ) তবে আপনি ফায়ারফক্স ৩.৫- এ "মালিকানাধীন" -মোজ-ট্রান্সফর্ম সম্পত্তি ব্যবহার করতে পারেন ।

সুতরাং আপনি ব্যবহার করতে পারেন:

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
} 

Comments

মালিকানা জুম সম্পত্তি কেবল আইই দ্বারা সমর্থিত। রেফারেন্স.সিটিপয়েন্টটকম

— কোয়ান্টিন

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

— জন

দ্রষ্টব্য: আমি মনে করি যে প্রস্তাবিত অন্যান্য সমাধানগুলি - যেমন এম এবং% ভিত্তিক স্কেলিং - আরও "খাঁটি" তবে বেশিরভাগ ওয়েব বিন্যাসে প্রয়োজনীয় ব্যবহারিক নয় যদি আপনি স্ক্র্যাচ থেকে সেভাবে তৈরি না করেন।

— জন গাল্লোয়ে

আমি অপেরা 10 বি 2 পরীক্ষা করেছি এবং মনে হয় এটি সমর্থন করে না। ফায়ারফক্স রাতের বেলা অদ্ভুত আচরণ করে (জুমযুক্ত খণ্ডগুলি অদৃশ্য হয়ে যায়)। আই 5/6 বগি। কেবল ওয়েবকিটেই কাজ করে Works

— কর্নেল

ধন্যবাদ জন, দুর্দান্ত তথ্য! ফায়ারফক্সে-মোজ-ট্রান্সফর্ম স্কেল প্রকৃতপক্ষে কাজ করে তবে আপনার ব্যবহারের ক্ষেত্রে নির্ভর করে আপনাকে -মোজ-ট্রান্সফর্ম-অরিজিন (সিএফআর। ডেভেলপার.মোজিলা.আর.এনইএন / সিএসএস /- মোজ-ট্রান্সফর্ম) ব্যবহার করে উপাদানটির অবস্থানটি সংশোধন করতে হতে পারে -অরগিন )

— ফটটা

Answer 2

এটি একটি বরং দেরি উত্তর, কিন্তু আপনি ব্যবহার করতে পারেন

body {
   transform: scale(1.1);
   transform-origin: 0 0;
   // add prefixed versions too.
}

110% দ্বারা পৃষ্ঠা জুম করতে। যদিও zoomশৈলীটি রয়েছে, ফায়ারফক্স এখনও দুঃখের সাথে এটি সমর্থন করে না।

এছাড়াও এটি আপনার জুমের থেকে কিছুটা আলাদা। css transformএকটি চিত্র জুম মত নয় রাং কারণ, ইত্যাদি কাজ করে, তাই এটি আপনার পৃষ্ঠার কিন্তু বাড়িয়ে দেব

---

রূপান্তর উত্স আপডেট করুন ।

Comments

এর জন্য ধন্যবাদ, তবে আপনাকে ঘোষণার মধ্যে কিছু সেমিকোলন প্রয়োজন। এছাড়াও, যখন আমি এই পৃষ্ঠাটি বাম দিকে সরিয়ে নিয়ে গেলাম, বাম মার্জিন পেরিয়ে গেলাম, যাতে পৃষ্ঠার বাম অংশটি আর দৃশ্যমান না হয়। বিভিন্ন সম্পর্কিত "... রূপান্তর-উত্স: 0 0" ঘোষণা এটি সংশোধন করে।

— ডেভ বার্টন

হ্যাঁ, আমার উল্লেখ করা উচিত ছিল যে বিষয়বস্তুটি ক্লিপযুক্ত transform। মন্তব্যের জন্য ধন্যবাদ.

— কুমারহর্ষস

আমি @ ডেভ বার্টনের সাথে একমত: transform-origin: 0 0;আমি যা চাই তা ব্যবহার করে। উদাহরণস্বরূপ, 150% পৃষ্ঠাটি জুম: transform: scale(1.5); transform-origin: 0 0;। আমি বিশ্বাস করি @ কুমার_হার্স এর অন্যথায় ভাল উত্তর সংশোধন করা উচিত।

— কাই কার্ভার

@ কাইকার্ভার আপনি যদি এই পদ্ধতিটি ব্যবহার করেন তবে এটি সর্বদা ক্লিপিংয়ের ফলস্বরূপ। আপনি কোন পয়েন্টটি ব্যবহার করছেন তা বিবেচনাধীন নয় transform-origin। আমি যা লিখেছি তা হ'ল কোন মানটি ব্যবহার করা উচিত তার একটি উদাহরণ । আপনি যদি অবশ্যই transform-origin: 0 0ব্যবহারের ক্ষেত্রে উপযুক্ত হন তবে এটি অবশ্যই

— অবৈধভাবে

@ অ্যাঙ্গুলারএম আপনি আচরণের জন্য একটি কোড স্নিপেট ভাগ করতে পারেন? আমি নিশ্চিত যে এর আরও কিছু কারণ আছে।

— কুমারহর্ষ

Answer 3

যদি আপনার সিএসএস সম্পূর্ণরূপে exবা emইউনিটগুলি নির্মিত হয়, তবে এটি সম্ভবত সম্ভব এবং সম্ভাব্য। আপনার কেবল font-size: 150%আপনার স্টাইলে bodyবা এর জন্য ডিক্লেয়ার করা দরকার html। এটি অন্যান্য প্রতিটি দৈর্ঘ্যের আনুপাতিকভাবে স্কেল করতে হবে। আপনি চিত্রগুলি এইভাবে স্কেল করতে পারবেন না, যদি না সেগুলিও স্টাইল না পায়।

তবে এটি বেশিরভাগ সাইটে যদি হয় তবে খুব বড় a

Comments

এটি কেবল আমার ফন্টের আকার পরিবর্তন করবে। সিটিআরএল + এছাড়াও স্থির প্রস্থ, উচ্চতা এবং চিত্রের আকারকে প্রশস্ত করে।

আমি জানি, তবে আপনি খাঁটি সিএসএসের সাথে এটি পেতে পারেন। এছাড়াও কেবল আপনার ফন্টগুলিই বদলে যায় না যেখানে সমস্ত মাত্রাগুলি ফন্টের আকারের একাধিক হিসাবে নির্দিষ্ট করা থাকে। অর্থ, সবকিছু যেখানে আপনি ব্যবহৃত %, emবা exইউনিট।

— জোয়

এটা ঠিক সঠিক নয়। আমি নীচে তালিকাভুক্ত সমাধানটি পরীক্ষা করেছি (জুম + -মোজ-ট্রান্সফর্ম বৈশিষ্ট্য) এবং এটি এফএফ 3.5, আই 6 +, সাফারি এবং অপেরাতে কাজ করে। এটি চিত্রের পাশাপাশি পাঠ্যের স্কেল করে। আপনি সিএসএসে পৃষ্ঠাগুলি স্কেল করতে পারেন।

— জন

Answer 4

যোহনেস যেমন বলেছিলেন - সরাসরি তার উত্তরে মন্তব্য করার মতো যথেষ্ট প্রতিনিধি নয় - আপনি যতক্ষণ না সমস্ত উপাদানগুলির "" মাত্রা ফন্টের আকারের একাধিক হিসাবে নির্দিষ্ট করা হয় ততক্ষণ আপনি এটি করতে পারেন Meaning অর্থ, আপনি যেখানে%, এম বা প্রাক্তন ব্যবহার করেছেন সেখানে সবকিছু ইউনিট "। যদিও আমি মনে করি% ফন্ট-আকারের নয়, উপাদানযুক্ত উপর ভিত্তি করে।

এবং আপনি সাধারণত চিত্রগুলির জন্য এই আপেক্ষিক ইউনিটগুলি ব্যবহার করবেন না, যদিও তারা পিক্সেল দ্বারা গঠিত, তবে একটি কৌশল আছে যা এটি আরও অনেক বেশি ব্যবহারিক করে তোলে।

আপনি যদি সংজ্ঞা দেন body{font-size: 62.5%};তবে 1 মিম 10px এর সমান হবে। যতদূর আমি জানি এটি সমস্ত প্রধান ব্রাউজার জুড়ে কাজ করে।

তারপরে আপনি আপনার (উদাহরণস্বরূপ) 100px বর্গক্ষেত্র চিত্র নির্দিষ্ট করতে পারবেন width: 10em; height: 10em;এবং ধরে নিবেন যে ফায়ারফক্সের স্কেলিংটি ডিফল্টতে সেট করা আছে, চিত্রগুলি তাদের প্রাকৃতিক আকারের হবে।

তৈরি করুন body{font-size: 125%};এবং সমস্ত কিছু - চিত্র সহ - ডাবল আসল আকারের হবে।

Comments

আমি বুঝতে পারি না, যদি আমি বলি বডি {ফন্ট-আকার: 62.5%; হরফ-আকার: 125%} - এটি 1 মিমকে 10px হিসাবে নির্ধারণ করবে। ব্রাউজারটি কি কেবল প্রথম ফন্ট-আকারের ঘোষণাকে উপেক্ষা করতে পারে এবং তারপরে কেবল 125% = 10px তৈরি করতে পারে?

আমি মনে করি আপনি ভুল বুঝেছেন। আপনি একই সাথে উভয় করতে হবে না। 62.5 x2 = 125 ... আপনি কীভাবে মান সামঞ্জস্য করে জিনিসগুলি স্কেল করতে পারবেন তা দেখানোর জন্য।

— এপেই-ইনাগো

হাঁ। আমার বলা উচিত ছিল 'তবে যদি আপনি জাভাস্ক্রিপ্টটি বডি-ফন্ট-আকার: 125%% সেট করার জন্য ব্যবহার করেন তবে সমস্ত পৃষ্ঠা উপাদান আকার দ্বিগুণ হবে'।

— e100

Answer 5

এই কোডের সাথে 1 মি বা 100% শরীরের উচ্চতার 1% এর সমান হবে

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"

Answer 6

 * {
transform: scale(1.1, 1.1)
}

এটি পৃষ্ঠার প্রতিটি উপাদানকে রূপান্তরিত করবে

Answer 7

জন টান তার সাইটের সাথে এটি করেছেন - http://jontangerine.com/ চিত্র সহ সমস্ত কিছু ইএমএসে ঘোষণা করা হয়েছে। সব। এভাবেই কাঙ্ক্ষিত প্রভাবটি অর্জিত হয়। পাঠ্য জুম এবং স্ক্রিন জুম প্রায় একই ফলাফল দেয়।

Answer 8

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

Comments

এটি একটি স্ট্যান্ডার্ড ব্রাউজার বৈশিষ্ট্য, তবে বৈশিষ্ট্যটি সরাসরি সাইটে যুক্ত করার অর্থ আপনাকে তাদের পছন্দসই ব্রাউজার এবং (২) ব্রাউজার-নির্দিষ্ট নির্দেশাবলীর সাথে (1) ব্যবহারকারীর দক্ষতার উপর নির্ভর করতে হবে না

— Ags1

Answer 9

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

        var zoom = 1;
        var width = 100;

        function bigger() {
            zoom = zoom + 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
        function smaller() {
            zoom = zoom - 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }