HTML网页如何自动适应手机屏幕

不一样的烟火912 2015-01-13 03:56:48

在网上看到用以下方法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
但是有些手机可以自动适应屏幕大小，而有些则不可以，请问是为什么呢？（是否跟手机屏幕分辨率有关？）
另外，加了此代码会使得网页左侧的按钮和右侧的表格之间的间距出现问题，横屏时是有间距的，但是竖屏就会导致按钮和表格重叠，请问这又是为什么呢？

...全文

30992 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

Hogans_hogan 2015-02-28

打赏
举报

Use Bootstrap can easily make page responsive

「已注销」 2015-01-29

打赏
举报

补丁宽就可以了

qq_25362591 2015-01-16

打赏
举报

框架是个好东西

滴滴月空雨 2015-01-15

打赏
举报

引用 5 楼 misteryangbin 的回复:

[quote=引用 4 楼 ht_917163972 的回复:] 你可以用css的媒体查询，也可以写js判断屏幕大小，赋值给页面，看你需求，如果只在手机上使用，建议你写js,如果web上也使用的话，建议你媒体查询

WEB上也使用的，请问如果用@Media的话，应该怎么写呢（新手不懂CSS）[/quote] @media screen and (max-width: 480px){ .aa{ width:60px; height:60px;} .bb{padding-left:70px; line-height:30px;} } 这样写，宽度尽量用%

不一样的烟火912 2015-01-14

打赏
举报

引用 6 楼 dcxy0 的回复:

还是用框架吧，简单省事

如果不用框架的话好不好解决此问题？本人框架知识尚未学习，现亟待解决此问题

JPF1024 2015-01-14

打赏
举报

引用 7 楼 misteryangbin 的回复:

[quote=引用 6 楼 dcxy0 的回复:] 还是用框架吧，简单省事

如果不用框架的话好不好解决此问题？本人框架知识尚未学习，现亟待解决此问题[/quote] 要单纯通过js控制还是有难度,如果不复杂还是写两个版本吧，或者你css用%控制高度和宽度(这个比写两个版本难度更大些)

不一样的烟火912 2015-01-14

打赏
举报

希望大家能够给予我帮助，谢谢！

JPF1024 2015-01-13

打赏
举报

还是用框架吧，简单省事

不一样的烟火912 2015-01-13

打赏
举报

引用 4 楼 ht_917163972 的回复:

你可以用css的媒体查询，也可以写js判断屏幕大小，赋值给页面，看你需求，如果只在手机上使用，建议你写js,如果web上也使用的话，建议你媒体查询

WEB上也使用的，请问如果用@Media的话，应该怎么写呢（新手不懂CSS）

ht_917163972 2015-01-13

打赏
举报

你可以用css的媒体查询，也可以写js判断屏幕大小，赋值给页面，看你需求，如果只在手机上使用，建议你写js,如果web上也使用的话，建议你媒体查询

不一样的烟火912 2015-01-13

打赏
举报

CSS文件中目前无内容，请问CSS中应该如何设置才能实现一楼的效果呢？求路过大神帮助！！

不一样的烟火912 2015-01-13

打赏
举报

引用 1 楼 liyuedan 的回复:

贴出代码……


<html> 
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<link href="css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form  method="POST">
<div style="float:left;width:15%;">
<p></p>
<br><input style="float:left;display:block;margin-bottom:12px;" type="submit" name="submit1" value="销售金额查询"></br>
<br><input style="float:left;display:block;margin-bottom:12px;" type="submit" name="submit2" value="销售金额查询1"></br>
</div>
</form>
</body>
代码如下
<?php

   header("Content-type:text/html;charset=utf-8");
   $serverName = "125.72.22.123,12332"; //local表示为本地,如果你用IP就不用括号了,1433表示端口
   $database = "efde";
   $uid = "sa";
   $ee= 'aaaa';
   $pwd = "$ee";

   try {
      $conn = new PDO( "sqlsrv:server=$serverName;Database = $database", $uid, $pwd); 
   }

   catch( PDOException $e ) {
      die( "Error connecting to SQL Server".$e ); 
   }

echo '<div style="float:left;width:80%;"><table cellpadding="0" cellspacing="0" border="1" width="1000" style="word-break:break-all; word-wrap:break-all;">';
echo '<caption><h1>2012销售金额合计</h1></caption>';
echo '<tr bgcolor="#cccccc">';

echo '<th>区域</th><th>一月</th><th>二月</th><th>三月</th><th>四月</th><th>五月</th><th>六月</th><th>七月</th><th>八月</th><th>九月</th><th>十月</th><th>十一月</th><th>十二月</th><th>总计</th>';
echo "<br>";
echo "<p></p>";
echo "\n";

   if(isset($_POST['submit1'])) { 
   //SQL语句
   $stmt= $conn->query("select isnull(区域,N'总计') as 区域,一月=sum(case when 月份='1' then round(销售金额/10000,2) else 0 end),二月=sum(case when 月份='2' then round(销售金额/10000,2) else 0 end),三月=sum(case when 月份='3' then round(销售金额/10000,2) else 0 end),四月=sum(case when 月份='4' then round(销售金额/10000,2) else 0 end),五月=sum(case when 月份='5' then round(销售金额/10000,2) else 0 end),六月=sum(case when 月份='6' then round(销售金额/10000,2) else 0 end),七月=sum(case when 月份='7' then round(销售金额/10000,2) else 0 end),八月=sum(case when 月份='8' then round(销售金额/10000,2) else 0 end),九月=sum(case when 月份='9' then round(销售金额/10000,2) else 0 end),十月=sum(case when 月份='10' then round(销售金额/10000,2) else 0 end),十一月=sum(case when 月份='11' then round(销售金额/10000,2) else 0 end),十二月=sum(case when 月份='12' then round(销售金额/10000,2) else 0 end),总计= sum(round(销售金额/10000,2)) from 一级订单明细表 where 年份='2012' group by 区域  with rollup");
   while (list ($区域,$一月,$二月,$三月,$四月,$五月,$六月,$七月,$八月,$九月,$十月,$十一月,$十二月, $总计) = $stmt->fetch(PDO::FETCH_NUM)){

	   echo "<center>";
	   echo '<tr>';
	   echo '<td width="70">'.$区域.'</td>';
	   echo '<td>'.(float)$一月.'</td>';
	   echo '<td>'.(float)$二月.'</td>';
	   echo '<td>'.(float)$三月.'</td>';
	   echo '<td>'.(float)$四月.'</td>';
	   echo '<td>'.(float)$五月.'</td>';
	   echo '<td>'.(float)$六月.'</td>';
	   echo '<td>'.(float)$七月.'</td>';
	   echo '<td>'.(float)$八月.'</td>';
	   echo '<td>'.(float)$九月.'</td>';
	   echo '<td>'.(float)$十月.'</td>';
	   echo '<td>'.(float)$十一月.'</td>';
	   echo '<td>'.(float)$十二月.'</td>';
	   echo '<td>'.(float)$总计.'</td>';
	   echo '</tr>';
   }
   echo '</table></div>';
   
   }
?>
</html>

滴滴月空雨 2015-01-13