{"id":4355,"date":"2015-11-09T16:39:38","date_gmt":"2015-11-09T08:39:38","guid":{"rendered":"https:\/\/sdeno.com\/?p=4355"},"modified":"2015-11-09T16:40:38","modified_gmt":"2015-11-09T08:40:38","slug":"%e8%a7%a3%e5%86%b3%ef%bc%9aiphone-iframe%e5%86%85%e7%9a%84%e9%a1%b5%e9%9d%a2%e4%b8%8d%e8%83%bd%e6%bb%91%e5%8a%a8%e9%97%ae%e9%a2%98","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=4355","title":{"rendered":"\u89e3\u51b3\uff1aiphone iframe\u5185\u7684\u9875\u9762\u4e0d\u80fd\u6ed1\u52a8\u95ee\u9898"},"content":{"rendered":"<p>\u82f9\u679c iphone\u00a0iframe \u6eda\u52a8\u00a0\u6ed1\u52a8<\/p>\n<p>\u4f7fIFRAME\u5728iOS\u8bbe\u5907\u4e0a\u652f\u6301\u6eda\u52a8<\/p>\n<a href=\"https:\/\/sdeno.com\/wp-content\/uploads\/2015\/11\/touchiframe.png\"><figure class=\"mdx-lazyload-container\" style=\"max-width:557px\"><div style=\"padding-top:69.658886894075%\"><\/div><div class=\"mdx-img-loading-sp mdui-valign\"><div><div class=\"mdui-spinner\"><\/div><\/div><\/div><img width=\"557\" height=\"388\" class=\"alignnone size-full wp-image-4356 lazyload\" title=\"touchiframe\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/sdeno.com\/wp-content\/uploads\/2015\/11\/touchiframe.png\" alt=\"touchiframe\" data-srcset=\"https:\/\/sdeno.com\/wp-content\/uploads\/2015\/11\/touchiframe.png 557w, https:\/\/sdeno.com\/wp-content\/uploads\/2015\/11\/touchiframe-300x208.png 300w\" sizes=\"auto, (max-width: 557px) 100vw, 557px\"><\/figure><\/a>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>HTML\u4ee3\u7801<\/strong><br \/>\n\u5728\u4f7f\u7528IFRAME\u6216\u8005\u5176\u4ed6HTML\u5143\u7d20\u65f6,\u4f60\u9700\u8981\u4f7f\u7528\u4e00\u4e2a\u5143\u7d20(\u5982DIV)\u6765\u5305\u88c5\u4ed6\u4eec:<\/p>\n<pre>&lt;div class=\"scroll-wrapper\"&gt; \r\n\u00a0&lt;iframe src=\"\"&gt;&lt;\/iframe&gt; \r\n&lt;\/div&gt; \r\n\u8fd9\u4e2aDIV\u5c06\u4f5c\u4e3a\u652f\u6301\u5185\u90e8\u6eda\u52a8\u7684\u57fa\u7840\u5bb9\u5668\u3002<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>CSS \u4ee3\u7801<\/strong><br \/>\n\u8981\u8ba9IFRAME\u652f\u6301\u6eda\u52a8,\u9700\u8981\u4e00\u4e2a\u5e38\u7528\u7684CSS\u5c5e\u6027\u548c\u4e00\u4e2a\u5f88\u5c11\u4eba\u77e5\u9053\u7684CSS\u5c5e\u6027(property):<\/p>\n<pre>.scroll-wrapper { \r\n  -webkit-overflow-scrolling: touch; \r\n  overflow-y: scroll; \r\n  \/* \u63d0\u793a: \u8bf7\u5728\u6b64\u5904\u52a0\u4e0a\u9700\u8981\u8bbe\u7f6e\u7684\u5927\u5c0f(dimensions)\u6216\u4f4d\u7f6e(positioning)\u4fe1\u606f! *\/ \r\n} \r\n.scroll-wrapper iframe { \r\n  \/* \u4f60\u81ea\u5df1\u6307\u5b9a\u7684\u6837\u5f0f *\/ \r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>-webkit-overflow-scrolling: touch;<\/strong> \u5c5e\u6027\u503c\u5c31\u662f\u4e13\u4e3a\u6d4f\u89c8\u5668\u4e2d\u6ea2\u51fa(overflow)\u65f6\u9700\u8981\u6eda\u52a8\u7684\u5143\u7d20\u8bbe\u8ba1\u7684\u3002 \u5982\u679c\u6ca1\u6709\u6307\u5b9a\u8fd9\u4e2a\u5c5e\u6027,\u5f53\u4f60\u60f3\u6eda\u52a8iframe\u65f6,\u5b9e\u9645\u4e0a\u4f1a\u5bfc\u81f4\u5916\u5c42\u9875\u9762\u7684\u6eda\u52a8,\u901a\u8fc7\u5b83\u4f60\u5c31\u53ef\u4ee5\u5bf9IFRAME\u7684\u6eda\u52a8\u8fdb\u884c\u63a7\u5236! \u5728\u539f\u4f5c\u8005\u7684\u535a\u5ba2\u7ad9\u70b9\u4e2d,\u4f7f\u7528\u4e86\u4e0b\u9762\u7684CSS:<\/p>\n<pre>.demo-iframe-holder { \r\n position: fixed; \r\n right: 0; \r\n bottom: 0; \r\n left: 0; \r\n top: 0; \r\n <span style=\"color: #ff00ff;\">-webkit-overflow-scrolling<\/span>: touch; \r\n <span style=\"color: #ff00ff;\">overflow-y<\/span>: scroll; \r\n} \r\n \r\n.demo-iframe-holder iframe { \r\n height: 100%; \r\n width: 100%; \r\n}<\/pre>\n<p><a href=\"http:\/\/blog.csdn.net\/renfufei\/article\/details\/37663355\" target=\"_blank\">http:\/\/blog.csdn.net\/renfufei\/article\/details\/37663355<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u82f9\u679c iphone\u00a0iframe \u6eda\u52a8\u00a0\u6ed1\u52a8 \u4f7fIFRAME\u5728iOS\u8bbe\u5907\u4e0a\u652f\u6301\u6eda\u52a8 &nbsp; &nbsp; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-4355","post","type-post","status-publish","format-standard","hentry","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/4355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4355"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/4355\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}