Tweet
2. upload this css file (http://yuliang.net/style/iphone.css) to the the place that you specified. This is the same code:
3. As you can tell, the "frame" or the iPhone image as background is located at http://yuliang.net/documents/images/iphone.png . Download it, upload it to your server and modify the url in step 2. You can make and use your own version of the iPhone picture but then it probably will have a different dimension than mine. Then you need to modify the css file to let the frame to appear right inside of that iPhone picture.
Want to show your mobile site to your friends who don't have an iPhone? Here's an alternative!
Want to embed an iPhone frame to your website? This is how to achieve that:
1. embed this code in your html or php file to wherever you want the frame to appear. Modify the urls to be your urls.
<link href="http://yuliang.net/style/iphone.css" rel="stylesheet" type="text/css" media="all" />
<div class="m_phone">
<iframe id="wapFrame" name="wapFrame" frameborder="0" width="320" height="460" src="http://m.yahoo.com/"></iframe>
</div> 2. upload this css file (http://yuliang.net/style/iphone.css) to the the place that you specified. This is the same code:
.m_phone { float:left; width:400px; height:800px; margin:10px 70px 10px 10px; display:inline; background:#fff url(http://yuliang.net/documents/images/iphone.png) no-repeat;}
.m_phone #wapFrame { border:0; margin:149px 0 0 42px;}
3. As you can tell, the "frame" or the iPhone image as background is located at http://yuliang.net/documents/images/iphone.png . Download it, upload it to your server and modify the url in step 2. You can make and use your own version of the iPhone picture but then it probably will have a different dimension than mine. Then you need to modify the css file to let the frame to appear right inside of that iPhone picture.
Post new comment