注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

悠游自在

似水流年,悠游天地,自在我心

 
 
 

日志

 
 
 
 

手机网页设计中的自适应问题  

2014-07-23 16:17:56|  分类: IT技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
整整一天,都在和网页做斗争,其实需求特别简单,就是要设计一个网页,其中有图片和文字,如何令其在手机上能适应屏幕大小,且能自动居中显示?
最终实现的网页框架如下

<!DOCTYPE  html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes"/>

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta name="format-detection" content="telephone=no">

    <link href="/styles/mp1.css" rel="stylesheet" type="text/css"/>

    <title>测试页面</title>

</head>

<body>

    <form id="form1" runat="server">

    <div id="my-area" style="max-width:700px; min-width:inherit; margin-left:auto;margin-right:auto; align-content:center;padding:4px;">

   <p>测试页面</p>

    <img src="***" border="0" style="border: 0px; vertical-align: middle; width:100%;max-width: 550px; height: auto; float: none; margin: 0px 10px 10px 0px;" />

   <p>测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:测试说明内容:</p>

    </div>

    </form>

</body>

</html>

其实这个问题本身并不难,到网上找找资料,应该很快能找到,但是我在调试中又遇到另外一个问题:
同样一个网页,在PC上浏览正常,但在手机上浏览字体不对,找了很久很久的原因,发现是手机访问该网页时,网页上引用的css文件(<link href="/styles/mp1.css" rel="stylesheet" type="text/css"/>)其实没有起作用;判断手机浏览器在访问相对路径的文件时其实与pc上浏览器不一样。
总之,走了不少弯路,才最终得到解决。
  评论这张
 
阅读(262)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018