সম্পূর্ণ পৃষ্ঠা <iframe>

Question 1

আমি নীচের উদাহরণ কোড আছে। মোবাইল ডিভাইসে ব্রাউজারগুলি বাদে এটি সমস্ত ব্রাউজারের সাথে দুর্দান্ত কাজ করে।

ওভারফ্লো ট্যাগটি ইস্যু।

মোবাইল ব্যতীত সকলের সাথে কাজ করে:

margin: 0; padding: 0; height: 100%; overflow: hidden;

কম্পিউটার নয় সমস্ত মোবাইল নিয়ে কাজ করে:

margin: 0; padding: 0; height: 100%;

এটি উভয় ক্ষেত্রে কাজ করার সেরা উপায় কি?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }
        </style>
    </head>
    <body>
        <iframe width="100%" height="100%" src="http://www.cnn.com" />
    </body>
</html>

Question 2

এখানে ওয়ার্কিং কোড। ডেস্কটপ এবং মোবাইল ব্রাউজারগুলিতে কাজ করে। আশা করি এটা সাহায্য করবে. সবাইকে সাড়া দেওয়ার জন্য ধন্যবাদ।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }

            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
            }
        </style>
    </head>
    <body>
        <div id="content">
            <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" />
        </div>
    </body>
</html>

Question 3

এটি ক্রস ব্রাউজার এবং সম্পূর্ণ প্রতিক্রিয়াশীল:

<iframe
  src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"
  style="
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999999;
    height: 100%;
  ">
</iframe>

Question 4

এটি আপনার সিএসএসে রাখুন।

iframe {
  width: 100%;
  height: 100vh;
}

Question 5

অতীতে আমি এটি ব্যবহার করেছি।

html, body {
  height: 100%;
  overflow: auto;
}

এছাড়াও iframeনিম্নলিখিত শৈলী যোগ করুন

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%

Question 6

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

নোট করুন এটি সম্পূর্ণ ক্রস ব্রাউজারে কাজ করছে, বৈধ HTML ফাইল। শুধু পরিবর্তন titleএবং srcআপনার প্রয়োজনের জন্য।
আপনার <meta charset>যদি অ-এসসিআইআই অক্ষর না থাকে তবে আপনি বাদ পড়ার বিষয়টি বিবেচনা করতে পারেন।

1. এটি আমার প্রিয়:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-1 </title>
<meta name=viewport content="width=device-width">
<style>
 html, body, iframe { height:100%; width:100%; margin:0; border:0; display:block }
</style>
<iframe src=src1></iframe>

<!-- More verbose CSS for better understanding:
  html   { height:100% }
  body   { height:100%; margin:0 }
  iframe { height:100%; border:0; display:block; width:100% } -->

বা 2. এরকম কিছু , সামান্য খাটো:

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-2 </title>
<meta name=viewport content="width=device-width">
<iframe src=src2 style="position:absolute; top:0; left:0; width:100%; height:100%; border:0">
</iframe>

দ্রষ্টব্য :
উপরোক্ত উদাহরণগুলি রক্ষণশীল হতে ব্যবহারগুলি এড়িয়ে চলুন height:100vhকারণ পুরানো ব্রাউজারগুলি এটি জানেন না (সম্ভবত এই দিনগুলি মোটা করুন) এবং মোবাইল ব্রাউজারগুলিতে height:100vhসর্বদা সমান হয় height:100%না (সম্ভবত এখানে প্রযোজ্য নয়)। অন্যথায়, vhজিনিসগুলি কিছুটা সরল করে, তাই

৩. এটি ভিএইচ ব্যবহার করে একটি উদাহরণ (আমার পছন্দ নয়, সামান্য সুবিধার সাথে কম সুসংগত)

<!DOCTYPE html>
<meta charset=utf-8>
<title> Title-3 </title>
<meta name=viewport content="width=device-width">
<style>
 body { margin:0 }
 iframe { display:block; width:100%; height:100vh; border:0 }
</style>
<iframe src=src3></iframe>