HTML5 整个网站以匹配移动设备上的屏幕分辨率
Posted
技术标签:
【中文标题】HTML5 整个网站以匹配移动设备上的屏幕分辨率【英文标题】：HTML5 whole website to match screen resolution on mobile devices 【发布时间】：2014-03-06 12:58:27 【问题描述】：我有一个使用 html5、jquery 和 css 创建的 Web 应用程序，其中包含，
<html>
<head>
<title>Pascal Pattern Scan Laser Photocoagulator</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (1462_Next_Treatment_Flat.psd) -->
<style type="text/css">
<!--
如您所见，它是在 Photoshop 中切片的，因此对于每个切片，我都有一个 css div 类，例如
div.Table_01
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
在移动设备上查看时，宽度与屏幕匹配，但高度对于移动屏幕来说太大（用户必须向下滚动）我如何才能匹配分辨率。类似于响应式设计？
我还需要在代码的 html 部分或 css 或两者中将高度设置为 AUTO 吗？
<div class="Table_01">
<div class="id1462-Next-Treatment-Flat-01">
<img src="images/1462_Next_Treatment_Flat_01.jpg" >
</div>
【问题讨论】：
使用 mediaQueries 进行移动布局 设置高度为自动；您不需要明确给出高度。高度由 DIV 中的内容确定 【参考方案1】：您必须在 css 中实现媒体查询。请通过下面提到的链接了解具体实现...
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
【讨论】：
以上是关于HTML5 整个网站以匹配移动设备上的屏幕分辨率的主要内容，如果未能解决你的问题，请参考以下文章
移动端开发HTML5（H5）采用SwiperJS单屏垂直滑动页面中，某页内容高度超出屏幕高度解决办法
云适配：One Web, Any Device 的网站跨屏适配