<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Sivan&#039;s Blog</title>
	<atom:link href="http://lightcss.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://lightcss.com</link>
	<description>Talk about the LightCSS</description>
	<lastBuildDate>Wed, 14 Dec 2011 12:41:56 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>解除网页禁止右键和禁止选字的 Bookmarklet</title>
		<link>http://lightcss.com/a-bookmarklet-to-unlock-right-button/</link>
		<comments>http://lightcss.com/a-bookmarklet-to-unlock-right-button/#comments</comments>
		<pubDate>Wed, 14 Dec 2011 12:33:12 +0000</pubDate>
		<dc:creator>Sivan</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Bookmarklet]]></category>

		<guid isPermaLink="false">http://lightcss.com/?p=155</guid>
		<description><![CDATA[很多网站为了防止别人复制内部的文字，都使用了 oncontextmenu 来防止右键。但是想快速看看他写的代码也有点麻烦，所以我写了段 js 来解除，只要把下面的链接拖到书签栏就可以快速使用了，不包成功。 全部解除 使用后可以解除右键、选择拖动和粘贴的锁定。]]></description>
			<content:encoded><![CDATA[<p>很多网站为了防止别人复制内部的文字，都使用了 oncontextmenu 来防止右键。但是想快速看看他写的代码也有点麻烦，所以我写了段 js 来解除，只要把下面的链接拖到书签栏就可以快速使用了，不包成功。</p>
<p><a href="javascript:body = document.getElementsByTagName('body')[0];body.setAttribute('oncontextmenu','return true');body.setAttribute('onmousedown','return true');body.setAttribute('onselectstart','return true');body.setAttribute('onpaste','return true');">全部解除</a></p>
<p>使用后可以解除右键、选择拖动和粘贴的锁定。</p>
]]></content:encoded>
			<wfw:commentRss>http://lightcss.com/a-bookmarklet-to-unlock-right-button/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>HP Veer 4G 使用小记</title>
		<link>http://lightcss.com/hp-veer-app/</link>
		<comments>http://lightcss.com/hp-veer-app/#comments</comments>
		<pubDate>Tue, 06 Dec 2011 14:17:39 +0000</pubDate>
		<dc:creator>Sivan</dc:creator>
				<category><![CDATA[webOS]]></category>
		<category><![CDATA[Veer]]></category>

		<guid isPermaLink="false">http://lightcss.com/?p=151</guid>
		<description><![CDATA[随着 HP 宣布放弃 webOS，在国庆节期间旗下产品价格纷纷跳水之际，我也跟风入了一台 HP Veer 4G。用了两个月了，列下简单感受和常用软件。 使用感受 外观 Veer 小巧的外形对男生来说可能有手滑的“危险”，手机面积跟银行卡无异，建议配手机绳。不建议买白色，因为颜色不是很纯。Qwerty 全键盘布局跟 BlackBerry 稍有区别，手感还算不错，比较严重的问题是塑料味挥之不去。划开键盘后背面同 BlackBerry 9800 一样有一个自拍镜，非常贴心。 性能 HP veer 4G 现在 ￥600 多的售价其实充满了性价比，玩愤怒的小鸟是毫无压力。有的朋友玩了刺客信条也没问题，但是因为屏幕小玩起来不舒服，所以我没装。 多媒体 由于没有内置 3.5 耳机插口，所以我没用 veer 听过歌。拍照功能比较失望，没有配闪光灯注定也不是什么好摄像头了。同为 500W 像素，成像效果比我的 BlackBerry 9800、Moto Defy 都要差。 操作系统 webOS 给我的感觉就像浏览器中的 Opera，一直在创新，一直被抄袭。无论在 iOS、Andorid &#8230; <a href="http://lightcss.com/hp-veer-app/">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>随着 HP 宣布放弃 webOS，在国庆节期间旗下产品价格纷纷跳水之际，我也跟风入了一台 HP Veer 4G。用了两个月了，列下简单感受和常用软件。<br />
<span id="more-151"></span><br />
<a href="http://lightcss.com/wp-content/uploads/2011/12/hp-veer.jpg" title="点击查看 HP Veer 大图"><img class="alignnone size-medium wp-image-153" title="点击查看 HP Veer 大图" src="http://lightcss.com/wp-content/uploads/2011/12/hp-veer-600x399.jpg" alt="hp-veer" width="420" height="279" /></a></p>
<h3>使用感受</h3>
<h4>外观</h4>
<p>Veer 小巧的外形对男生来说可能有手滑的“危险”，手机面积跟银行卡无异，建议配手机绳。不建议买白色，因为颜色不是很纯。Qwerty 全键盘布局跟 BlackBerry 稍有区别，手感还算不错，比较严重的问题是塑料味挥之不去。划开键盘后背面同 BlackBerry 9800 一样有一个自拍镜，非常贴心。</p>
<h4>性能</h4>
<p>HP veer 4G 现在 ￥600 多的售价其实充满了性价比，玩愤怒的小鸟是毫无压力。有的朋友玩了刺客信条也没问题，但是因为屏幕小玩起来不舒服，所以我没装。</p>
<h4>多媒体</h4>
<p>由于没有内置 3.5 耳机插口，所以我没用 veer 听过歌。拍照功能比较失望，没有配闪光灯注定也不是什么好摄像头了。同为 500W 像素，成像效果比我的 BlackBerry 9800、Moto Defy 都要差。</p>
<h4>操作系统</h4>
<p>webOS 给我的感觉就像浏览器中的 Opera，一直在创新，一直被抄袭。无论在 iOS、Andorid 4.0、还是 QNX 中都不难发现 webOS 的影子。虽然没有 iOS 那么多应用，但 webOS 用户体验很好，只是细节不足。既然有了全键盘，一些操作却没有快捷键，这一点比 BlackBerry 差了不少。我的 BlackBerry 8300 用 OS 4.5 有 4 年了，依旧觉得生猛。</p>
<h3>使用技巧</h3>
<ul>
<li>很多朋友会遇到屏幕失灵乱跳的情况，放到口袋里会导致此情况。贴膜可以解决，按锁屏键再唤起也可以解决。建议贴膜。</li>
<li>系统如果没反应，就按住锁屏键关机，如果黑屏彻底死，按住锁屏键来回拨3下静音开关会重启。</li>
<li>充电接口由于是磁力吸附的，所以有时接触不良，最好确认下进入了充电状态。</li>
<li>充电时如果选择“U 盘模式”，那么手机将关闭信号。</li>
<li>在“定位服务”-“首选项”-“确定我的位置，利用…”这里，开启Google服务可以大幅提高定位速度。GPS 服务不要一直开启，设定为“总是询问”会更省电。</li>
<li>我的使用习惯：中午吃饭开 3G 看新闻、玩微博，其他时间开 2G 关数据服务。电池可以使用 2～3 天没有问题。</li>
</ul>
<h3>常用软件</h3>
<ul>
<li>原生浏览器很难用，建议使用 Universe 浏览器。</li>
<li><a title="打开 Noteday webOS主页" href="http://webos.noteday.com/">Noteday</a> 开发的新浪微博、网易新闻、人人客户端、豆瓣、豆瓣电台等，推荐。</li>
<li>Hello QQ 看介绍是基于 HTML5 的，切换不是很流畅，可以凑合用。</li>
<li>搜狗地图、百度地图都不错。</li>
<li>aniWeather 可以查看天气预报，还有一个 Whendle 不如这个好用。</li>
<li>因为 Veer 屏幕小，游戏只好玩玩益智类。愤怒的小鸟、Slice It!、Beyond Ynth、Defend! 做的都还不错，而像百战天虫一类的尽管流畅运行，但屏幕太小玩着也不是很爽。</li>
<li>安装 freeTether 可以当 3G 热点用，配合联通卡可以当无线 3G 路由了。</li>
<li>输入法装的忠哲输入，类似黑莓上的百度输入法，用着还不错。</li>
</ul>
<p>基本就这些吧，这篇从草稿到发布拖了一个多月。我已经准备换 iPhone 4S 了，估计 Veer 也用不长了。:-)</p>
]]></content:encoded>
			<wfw:commentRss>http://lightcss.com/hp-veer-app/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>HTML5标准废弃 time 标签，转而使用 data 标签</title>
		<link>http://lightcss.com/say-goodbye-to-html5-time/</link>
		<comments>http://lightcss.com/say-goodbye-to-html5-time/#comments</comments>
		<pubDate>Mon, 31 Oct 2011 10:24:50 +0000</pubDate>
		<dc:creator>Sivan</dc:creator>
				<category><![CDATA[(x)HTML/CSS]]></category>
		<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://lightcss.com/?p=148</guid>
		<description><![CDATA[现在我要告诉各位一件非常悲剧的事：HTML5 &#60;time&#62;标签被废弃了，它将由一个更土鳖但是更通用的标签&#60;data&#62;替代。pubdate 属性也一道被废弃了，今后不再有这样一个简单易用的方式去标注内容的发布时间了。 主笔 Ian "Hixie" 解释说： 目前&#60;time&#62;标签有以下几种用途： 通过 CSS 更方便的设置日期/时间的样式。 可以为文章标记文章的发布日期/时间。 使用“微格式”与“微数据”中的方式标记出一种机器可读的日期/时间格式。 用途1和2似乎都没有什么吸引力。而3其实不只可以用在日期上，更可以应用到日期及时间以外的其他类似元素上。 提议：我们干脆放弃1和2的用法，把第3种用法改良一下，把&#60;time&#62;换成&#60;data&#62;，然后像使用&#60;abbr&#62;那样，通过微格式和微数据来提供机器可读的数据。 我认为这是个糟糕的决定。 （原文还有几段没有翻译，译自《Goodbye HTML5 &#60;time&#62;, hello &#60;data&#62;!》） 我个人觉得这个决定虽显草率，但倒可以接受。&#60;data&#62;标签将被用于更多地方，而且可以更好的引入微数据。 update 2011.11.04：W3C团队已经把&#60;time&#62;标签重新加回HTML5标准当中，WHATWG版本还不明确，关于此标签的最终定论看来短时间内还不能确定。]]></description>
			<content:encoded><![CDATA[<p>现在我要告诉各位一件非常悲剧的事：HTML5 &lt;time&gt;标签被废弃了，它将由一个更土鳖但是更通用的<a title="查看<data>标签介绍" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-data-element">标签&lt;data&gt;</a>替代。pubdate 属性也一道被废弃了，今后不再有这样一个简单易用的方式去标注内容的发布时间了。<br />
<span id="more-148"></span><br />
主笔 <a href="http://www.w3.org/Bugs/Public/show_bug.cgi?id=13240">Ian "Hixie" 解释说</a>：</p>
<blockquote><p>目前&lt;time&gt;标签有以下几种用途：</p>
<ol>
<li>通过 CSS 更方便的设置日期/时间的样式。</li>
<li>可以为文章标记文章的发布日期/时间。</li>
<li>使用“微格式”与“微数据”中的方式标记出一种机器可读的日期/时间格式。</li>
</ol>
<p>用途1和2似乎都没有什么吸引力。而3其实不只可以用在日期上，更可以应用到日期及时间以外的其他类似元素上。</p>
<p>提议：我们干脆放弃1和2的用法，把第3种用法改良一下，把&lt;time&gt;换成&lt;data&gt;，然后像使用&lt;abbr&gt;那样，通过微格式和微数据来提供机器可读的数据。</p></blockquote>
<p>我认为这是个糟糕的决定。</p>
<p>（原文还有几段没有翻译，译自<a title="打开查看原文" href="http://www.brucelawson.co.uk/2011/goodbye-html5-time-hello-data/">《Goodbye HTML5 &lt;time&gt;, hello &lt;data&gt;!》</a>）</p>
<hr />
<p>我个人觉得这个决定虽显草率，但倒可以接受。&lt;data&gt;标签将被用于更多地方，而且可以更好的引入微数据。</p>
<hr />
<p>update 2011.11.04：W3C团队已经把&lt;time&gt;标签重新加回HTML5标准当中，WHATWG版本还不明确，关于此标签的最终定论看来短时间内还不能确定。</p>
]]></content:encoded>
			<wfw:commentRss>http://lightcss.com/say-goodbye-to-html5-time/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>面向网站设计师和开发人员的超级免费电子书大礼包</title>
		<link>http://lightcss.com/super-bundle-of-free-e-books-for-web-designers-and-developers/</link>
		<comments>http://lightcss.com/super-bundle-of-free-e-books-for-web-designers-and-developers/#comments</comments>
		<pubDate>Tue, 11 Oct 2011 08:50:03 +0000</pubDate>
		<dc:creator>Sivan</dc:creator>
				<category><![CDATA[(x)HTML/CSS]]></category>
		<category><![CDATA[免费]]></category>
		<category><![CDATA[电子书]]></category>

		<guid isPermaLink="false">http://lightcss.com/?p=147</guid>
		<description><![CDATA[WordPress Arena最近整理了非常出色的一些适用于网站设计师和开发人员的免费电子书出来，其中包括《深入浅出HTML与CSS、XHTML》（个人认为最好的重构入门书籍）、《HTML和XHTML权威指南》、《CSS Cookbook》、《Learning PHP 5》等。这些电子书都是正版的，大部分可以直接下载，还有一些在Google Books。推荐感兴趣的朋友看一下。 下载地址：Super Bundle of Free e-books for Web Designers and Developers]]></description>
			<content:encoded><![CDATA[<p>WordPress Arena最近整理了非常出色的一些适用于网站设计师和开发人员的免费电子书出来，其中包括《深入浅出HTML与CSS、XHTML》（个人认为最好的重构入门书籍）、《HTML和XHTML权威指南》、《CSS Cookbook》、《Learning PHP 5》等。这些电子书都是正版的，大部分可以直接下载，还有一些在Google Books。推荐感兴趣的朋友看一下。</p>
<p>下载地址：<a href="http://wparena.com/freebies/super-bundle-of-free-e-books-for-web-designers-and-developers/" title="打开原文链接">Super Bundle of Free e-books for Web Designers and Developers</a></p>
]]></content:encoded>
			<wfw:commentRss>http://lightcss.com/super-bundle-of-free-e-books-for-web-designers-and-developers/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>我今天神情失落⋯⋯</title>
		<link>http://lightcss.com/goodbye-steve/</link>
		<comments>http://lightcss.com/goodbye-steve/#comments</comments>
		<pubDate>Thu, 06 Oct 2011 19:26:54 +0000</pubDate>
		<dc:creator>Sivan</dc:creator>
				<category><![CDATA[未分类]]></category>

		<guid isPermaLink="false">http://lightcss.com/?p=142</guid>
		<description><![CDATA[我可能不是一个狂热的果粉，但我此刻依旧无比难过。世间又少了一个值得崇敬的人。 把热爱的事物推向顶峰，然后悄然离去，或许是你这辈子做的最酷的一件事。 望着我的苹果设备，望着这个改变我生活的人，此刻如果不说点什么，内心有愧。 Thanks, Steve. Goodbye.]]></description>
			<content:encoded><![CDATA[<p><a href="http://lightcss.com/goodbye-steve/"><img class="alignnone size-full wp-image-144" title="Goodbye, Steve." src="http://lightcss.com/wp-content/uploads/2011/10/jobs.jpg" alt="Steve Jobs" width="552" height="401" /></a><br />
<span id="more-142"></span><embed src="http://www.xiami.com/widget/0_2092758/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed><br />
我可能不是一个狂热的果粉，但我此刻依旧无比难过。世间又少了一个值得崇敬的人。</p>
<p>把热爱的事物推向顶峰，然后悄然离去，或许是你这辈子做的最酷的一件事。</p>
<p>望着我的苹果设备，望着这个改变我生活的人，此刻如果不说点什么，内心有愧。</p>
<p>Thanks, Steve. Goodbye.</p>
<p><a href="http://lightcss.com/wp-content/uploads/2011/10/desktop.png"><img class="alignnone size-medium wp-image-145" title="桌面" src="http://lightcss.com/wp-content/uploads/2011/10/desktop-600x375.png" alt="Sivan's Desktop" width="600" height="375" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://lightcss.com/goodbye-steve/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Linode开通东京机房供选择</title>
		<link>http://lightcss.com/linode-cloud-asia-pacific/</link>
		<comments>http://lightcss.com/linode-cloud-asia-pacific/#comments</comments>
		<pubDate>Tue, 20 Sep 2011 07:12:43 +0000</pubDate>
		<dc:creator>Sivan</dc:creator>
				<category><![CDATA[VPS]]></category>
		<category><![CDATA[Linode]]></category>

		<guid isPermaLink="false">http://lightcss.com/?p=136</guid>
		<description><![CDATA[美国著名VPS服务商Linode近日开通了东京机房服务器供亚太地区用户选择。可以通过Linode官方提供的测试服务器tokyo1.linode.com进行测速。 我以前用的Fremont线路，访问速度已经非常快，ping在200ms以内。现在Tokyo线路ping竟然不到70ms。速度果然杠杠的。我已于今天中午搬到了大日本帝国的东京机房，可以通过访问我的博客感受速度。 p.s.不知道地震是否会对此机房造成影响，考虑到Linode众多的兲朝客户都可能蜂拥而至东京机房，该线路能否挺得够久也是一个疑问。]]></description>
			<content:encoded><![CDATA[<p>美国著名VPS服务商<a title="打开Linode官网" href="http://www.linode.com/?r=a270dff367152eaf1aa2a0763c482dafe8f63df7">Linode</a>近日开通了东京机房服务器供亚太地区用户选择。可以通过Linode官方提供的测试服务器<strong>tokyo1.linode.com</strong>进行测速。</p>
<p>我以前用的Fremont线路，访问速度已经非常快，ping在200ms以内。现在Tokyo线路ping竟然不到70ms。速度果然杠杠的。我已于今天中午搬到了大日本帝国的东京机房，可以通过访问我的博客感受速度。</p>
<p><img class="alignnone size-full wp-image-137" title="tokyo" src="http://lightcss.com/wp-content/uploads/2011/09/tokyo.png" alt="" width="237" height="31" /></p>
<p>p.s.不知道地震是否会对此机房造成影响，考虑到Linode众多的兲朝客户都可能蜂拥而至东京机房，该线路能否挺得够久也是一个疑问。</p>
]]></content:encoded>
			<wfw:commentRss>http://lightcss.com/linode-cloud-asia-pacific/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>CSS3版变形金刚</title>
		<link>http://lightcss.com/css3-transformers/</link>
		<comments>http://lightcss.com/css3-transformers/#comments</comments>
		<pubDate>Fri, 02 Sep 2011 15:09:27 +0000</pubDate>
		<dc:creator>Sivan</dc:creator>
				<category><![CDATA[(x)HTML/CSS]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS3]]></category>

		<guid isPermaLink="false">http://lightcss.com/?p=134</guid>
		<description><![CDATA[以前做过一个CSS3版忍者神龟，刚才无聊又做了一个变形金刚。 Safari 4+、Chrome、Firefox 5+、Opera 11+以及iOS 4+、Blackberry OS6+、Android都可以看到效果。 演示页面： http://lightcss.com/tutorials/transformers/]]></description>
			<content:encoded><![CDATA[<p>以前做过一个<a href="http://lightcss.com/css3-turtles/" title="CSS3版忍者神龟">CSS3版忍者神龟</a>，刚才无聊又做了一个变形金刚。</p>
<p>Safari 4+、Chrome、Firefox 5+、Opera 11+以及iOS 4+、Blackberry OS6+、Android都可以看到效果。</p>
<p>演示页面：<span id="more-134"></span><br />
<a href="http://lightcss.com/tutorials/transformers/" title="CSS3版变形金刚" rel="external">http://lightcss.com/tutorials/transformers/</a></p>
<link rel="stylesheet" href="http://lightcss.com/tutorials/transformers/style.css" />
<div id="transformers-container">
<div id="transformers-content">
<div id="transformers" class="transformers-parts">
<div id="transformers-head"></div>
<div id="transformers-body"></div>
<div id="transformers-la"></div>
<div id="transformers-ra"></div>
<div id="transformers-ll"></div>
<div id="transformers-rl"></div>
</p></div>
</p></div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://lightcss.com/css3-transformers/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>看图猜浏览器</title>
		<link>http://lightcss.com/guess-the-web-browser-game/</link>
		<comments>http://lightcss.com/guess-the-web-browser-game/#comments</comments>
		<pubDate>Mon, 15 Aug 2011 15:43:05 +0000</pubDate>
		<dc:creator>Sivan</dc:creator>
				<category><![CDATA[未分类]]></category>
		<category><![CDATA[浏览器]]></category>

		<guid isPermaLink="false">http://lightcss.com/?p=130</guid>
		<description><![CDATA[从Reddit看到的，来猜猜看吧~从上往下依次是⋯⋯国人如果答不上最后一个，可真是对不起最年轻少将、空姐、相信奇迹的发言人啊。]]></description>
			<content:encoded><![CDATA[<p>从<a title="Reddit" href="http://www.reddit.com/" rel="nofollow">Reddit</a>看到的，来猜猜看吧~从上往下依次是⋯⋯国人如果答不上最后一个，可真是对不起最年轻少将、空姐、相信奇迹的发言人啊。<br />
<span id="more-130"></span><a title="猜猜浏览器" href="http://i.imgur.com/H4lcN.jpg"><img src="http://i.imgur.com/H4lcN.jpg" alt="Loading..." /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://lightcss.com/guess-the-web-browser-game/feed/</wfw:commentRss>
		<slash:comments>24</slash:comments>
		</item>
		<item>
		<title>CSS3 Transform实践：在手机浏览器中缩放iframe</title>
		<link>http://lightcss.com/css3-transform-scale-1/</link>
		<comments>http://lightcss.com/css3-transform-scale-1/#comments</comments>
		<pubDate>Sat, 13 Aug 2011 09:43:00 +0000</pubDate>
		<dc:creator>Sivan</dc:creator>
				<category><![CDATA[(x)HTML/CSS]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[移动开发]]></category>

		<guid isPermaLink="false">http://lightcss.com/?p=124</guid>
		<description><![CDATA[在App每日推送的网站中，我们使用了百度广告管家来控制网站广告的投放。其提供的代码通过js写了一段&#60;iframe&#62;来显示广告，这在电脑以及iPad上是没有问题的，但在手机上的显示却产生了一些问题。 &#60;iframe&#62;框架在手机版网页中的问题 由于App每日推送专门针对iPhone设计了布局，侧栏宽度较原尺寸做了缩小，而iframe代码被固定了宽度，所以在手机中显示成了溢出（如图一）。 可能很多朋友的第一反应就是在css里给iframe强制设定宽和高。其实在这样设定后，框架的尺寸是缩小了，但框架里的内容却没有缩放，所以广告图片会只露出一小部分来。 使用CSS3 Transform缩放iframe 由于问题只存在于手机端，所以用CSS3的transform:scale属性来解决就变得非常可行。transform:scale属性在不改变元素在文档流中所占空间的前提下，对元素的显示进行放大或缩小。因此，只要把iframe框架缩放到合适大小，再通过负值margin把iframe容器挪到合适的位置使其不溢出即可。 首先，使用transform:scale(0.6);把框架缩小到0.6倍大小，然后通过transform-origin:100% 100%;让缩放在右下角对齐。 #content_sub iframe { -webkit-transform: scale(0.6); -webkit-transform-origin: 100% 100%; } 如果不使用右下角对齐，比如使用默认的居中缩放，那么通过负值margin移动位置后，元素右侧还会占有空间。“transform:scale”只缩放显示效果，并不影响元素的width、height值。 使用这段代码后，iframe内容进行了右下角对齐的缩放（如图二）。 由于元素实际上还是占用了和桌面浏览器中一样的尺寸，所以需要在不脱离文档流的前提下把元素位置向左上挪，负值margin是最好的选择。（注：当然你也可以让它脱离文档流，比如给容器添加position:relative;并固定高度，再给iframe的容器分别设定绝对定位和位置，但是这样太麻烦了） 在百度广告管家生成的代码中，iframe外层还有一个div容器，给它添加负值margin从而把其位置摆正确（如图）。给&#60;iframe&#62;添加负值margin无效。 #iframe_wrap { margin-left: -95px; margin-top: -40px; } 到这里，无论是iPhone还是PC浏览器，都可以看到一样的效果了（如图三）。 最后，我对代码做了一下小调整，通过css3的新选择器让缩放效果只对百度广告管家的iframe生效。 #content_sub iframe[id^="baidu_clb"] { -webkit-transform: scale(0.6); -webkit-transform-origin: 100% 100%; } &#8230; <a href="http://lightcss.com/css3-transform-scale-1/">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>在<a title="打开App每日推送的网站" href="http://appdp.com/">App每日推送</a>的网站中，我们使用了百度广告管家来控制网站广告的投放。其提供的代码通过js写了一段&lt;iframe&gt;来显示广告，这在电脑以及iPad上是没有问题的，但在手机上的显示却产生了一些问题。</p>
<h3 style="clear: none;">&lt;iframe&gt;框架在手机版网页中的问题</h3>
<p>由于App每日推送专门针对iPhone设计了布局，侧栏宽度较原尺寸做了缩小，而iframe代码被固定了宽度，所以在手机中显示成了溢出（如图一）。<br />
<span id="more-124"></span><br />
<img class="alignnone size-full wp-image-125" title="scale-1" src="http://lightcss.com/wp-content/uploads/2011/08/scale-1.png" alt="图一" width="480" height="320" /></p>
<p>可能很多朋友的第一反应就是在css里给iframe强制设定宽和高。其实在这样设定后，框架的尺寸是缩小了，但框架里的内容却没有缩放，所以广告图片会只露出一小部分来。</p>
<h3>使用CSS3 Transform缩放iframe</h3>
<p>由于问题只存在于手机端，所以用CSS3的transform:scale属性来解决就变得非常可行。transform:scale属性在不改变元素在文档流中所占空间的前提下，对元素的显示进行放大或缩小。因此，只要把iframe框架缩放到合适大小，再通过负值margin把iframe容器挪到合适的位置使其不溢出即可。</p>
<p>首先，使用transform:scale(0.6);把框架缩小到0.6倍大小，然后通过transform-origin:100% 100%;让缩放在右下角对齐。</p>
<pre class="css">#content_sub iframe {
	-webkit-transform: scale(0.6);
	-webkit-transform-origin: 100% 100%;
}</pre>
<p>如果不使用右下角对齐，比如使用默认的居中缩放，那么通过负值margin移动位置后，元素右侧还会占有空间。“transform:scale”只缩放显示效果，并不影响元素的width、height值。</p>
<p>使用这段代码后，iframe内容进行了右下角对齐的缩放（如图二）。<br />
<img class="alignnone size-full wp-image-126" title="scale-2" src="http://lightcss.com/wp-content/uploads/2011/08/scale-2.png" alt="图二" width="480" height="320" /></p>
<p>由于元素实际上还是占用了和桌面浏览器中一样的尺寸，所以需要在不脱离文档流的前提下把元素位置向左上挪，负值margin是最好的选择。（注：当然你也可以让它脱离文档流，比如给容器添加position:relative;并固定高度，再给iframe的容器分别设定绝对定位和位置，但是这样太麻烦了）</p>
<p>在百度广告管家生成的代码中，iframe外层还有一个div容器，给它添加负值margin从而把其位置摆正确（如图）。给&lt;iframe&gt;添加负值margin无效。</p>
<pre>#iframe_wrap {
	margin-left: -95px;
	margin-top: -40px;
}</pre>
<p>到这里，无论是iPhone还是PC浏览器，都可以看到一样的效果了（如图三）。<br />
<img class="alignnone size-full wp-image-127" title="scale-3" src="http://lightcss.com/wp-content/uploads/2011/08/scale-3.png" alt="图三" width="480" height="320" /></p>
<p>最后，我对代码做了一下小调整，通过css3的新选择器让缩放效果只对百度广告管家的iframe生效。</p>
<pre>#content_sub iframe[id^="baidu_clb"] {
	-webkit-transform: scale(0.6);
	-webkit-transform-origin: 100% 100%;
}
#content_sub div[id^="baidu_clb"] {
	margin-left: -95px;
	margin-top: -40px;
}</pre>
<p>需要注意的是以上所有代码都包含在了一个@media判断屏幕宽度的容器内。</p>
<p>针对此类问题如果你有更好的处理方法，欢迎与我交流 <img src='http://lightcss.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://lightcss.com/css3-transform-scale-1/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>如果云（3个）、如果说（5个）邀请码</title>
		<link>http://lightcss.com/chinese-ifttt-invitation/</link>
		<comments>http://lightcss.com/chinese-ifttt-invitation/#comments</comments>
		<pubDate>Mon, 25 Jul 2011 09:24:32 +0000</pubDate>
		<dc:creator>Sivan</dc:creator>
				<category><![CDATA[未分类]]></category>
		<category><![CDATA[邀请码]]></category>

		<guid isPermaLink="false">http://lightcss.com/?p=120</guid>
		<description><![CDATA[现有3个如果云、5个如果说邀请码，要的留言说要哪个即可，不用把邮箱写到留言里。 邀请已经发完了，不再发了。]]></description>
			<content:encoded><![CDATA[<p><del>现有3个如果云、5个如果说邀请码，要的留言说要哪个即可，不用把邮箱写到留言里。</del></p>
<p>邀请已经发完了，不再发了。</p>
]]></content:encoded>
			<wfw:commentRss>http://lightcss.com/chinese-ifttt-invitation/feed/</wfw:commentRss>
		<slash:comments>37</slash:comments>
		</item>
	</channel>
</rss>

