সমস্যাটি হ'ল যখন কোনও ওয়েবসাইটের মধ্যে সামগ্রী সন্নিবেশ করতে আপনাকে আইফ্রেম ব্যবহার করতে হবে, তখন আধুনিক ওয়েব-ওয়ার্ল্ডে আশা করা যায় যে আইফ্রেমটিও প্রতিক্রিয়াশীল হবে। তত্ত্বের ক্ষেত্রে এটি সহজ, সহজভাবে অ্যাডারের ব্যবহার <iframe width="100%"></iframe>বা সিএসএস প্রস্থ সেট করুন বাস্তবে iframe { width: 100%; }এটি খুব সহজ নয়, তবে এটি হতে পারে।
যদি iframeসামগ্রীটি সম্পূর্ণরূপে প্রতিক্রিয়াশীল এবং অভ্যন্তরীণ স্ক্রোল বারগুলি ব্যতীত নিজেই আকার পরিবর্তন করতে পারে, তবে আইওএস সাফারি iframeকোনও বাস্তব সমস্যা ছাড়াই পুনরায় আকার দেবে ।
আপনি যদি নিম্নলিখিত কোডটি বিবেচনা করেন:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test</title>
<style type="text/css" rel="stylesheet">
#Main {
padding: 10px;
}
</style>
</head>
<body>
<h1>Iframe Isolation Test 13.17</h1>
<div id="Main">
<iframe height="950" width="100%" src="Content.html"></iframe>
</div>
</body>
</html>
সঙ্গে Content.html :
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test - Content</title>
<style type="text/css" rel="stylesheet">
#Main {
width: 100%;
background: #ccc;
}
</style>
</head>
<body>
<div id="Main">
<div id="ScrolledArea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada purus quis commodo convallis. Fusce consectetur mauris eget purus tristique blandit. Nam nec volutpat augue. Aliquam sit amet augue vitae orci fermentum tempor sit amet gravida augue. Pellentesque convallis velit eu malesuada malesuada. Aliquam erat volutpat. Nam sollicitudin nulla nec neque viverra, non suscipit purus tincidunt. Aenean blandit nisi felis, sit amet ornare mi vestibulum ac. Praesent ultrices varius arcu quis fringilla. In vitae dui consequat, rutrum sapien ut, aliquam metus. Proin sit amet porta velit, suscipit dignissim arcu. Cras bibendum tellus eu facilisis sodales. Vestibulum posuere, magna ut iaculis consequat, tortor erat vulputate diam, ut pharetra sapien massa ut magna. Donec massa purus, pharetra sed pellentesque nec, posuere ut velit. Nam venenatis feugiat odio quis tristique.
</div>
</div>
</body>
</html>
তারপরে এটি আইওএস 7.1 সাফারিগুলিতে সমস্যা ছাড়াই কাজ করে। আপনি কোনও সমস্যা ছাড়াই ল্যান্ডস্কেপ এবং প্রতিকৃতির মধ্যে পরিবর্তন করতে পারেন।
তবে কেবল এটি যোগ করে বিষয়বস্তু এইচটিএমএল সিএসএস পরিবর্তন করে :
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}
আপনি এটি পান:
আপনি দেখুন করতে পারেন, যদিও Content.html বিষয়বস্তু সম্পূর্ণরূপে প্রতিক্রিয়াশীল ( DIV আছে # ScrolledArea হয়েছে overflow: scrollসেট) এবং আইফ্রেম প্রস্থ 100% আইফ্রেম এখনও পুরো প্রস্থ লাগে DIV আছে # ScrolledArea যেন ওভারফ্লো এমনকি অস্তিত্ব নেই। ডেমো
এই জাতীয় ক্ষেত্রে, iframeবিষয়বস্তুতে কী স্ক্রোলিংয়ের ক্ষেত্রগুলি ছিল, প্রশ্নটি তৈরি হয় iframe, যখন আইফ্রেমে সামগ্রী অনুভূমিকভাবে স্ক্রোলিংয়ের ক্ষেত্রগুলি থাকে তখন কীভাবে প্রতিক্রিয়া পাওয়া যায়? এখানে সমস্যাটি আসলে বিষয়বস্তু এইচটিএমএল প্রতিক্রিয়াশীল নয় এমন নয়, তবে আইওএস সাফারি ইফ্রেমে কেবল আকার পরিবর্তন করে যাতে div#ScrolledAreaসম্পূর্ণরূপে দৃশ্যমান হয়।
white-space: nowrapনিজেই সমস্যা নয়। চরম প্রস্থের জন্য আমি কেবল এটি ব্যবহার করছি div#ScrolledArea। আইফ্রেম সামগ্রীটি যখন অনুভূমিকভাবে স্ক্রোলযোগ্য অঞ্চলগুলিতে থাকে তখন সমস্যাটি আসে। যদি এটি হয় তবে iOS সাফারি কেবল আপনার প্রস্থের সেটিংসকে উপেক্ষা করে এবং গর্তের সামগ্রী এবং সাইটের প্রতিক্রিয়াটি ভঙ্গ করে।
white-space: nowrap?