使自己做的asp.net网页适应手机浏览

特别提醒：

对于文本框和其他控件，无法自适应，只有纯粹的文本和table的单元格可以自适应，其他的只有设置为具体的宽度，或者在一个表格中（本来在电脑中显示一行的，在手机中要设置为显示几行），只有判断是否是手机或者电脑，分别设计不同的界面和更改细小的逻辑代码。

 

With=100%，充满整个屏幕，不设置具体值，宽度与控件宽度相同。

标签： asp.net适应手机

2016-07-26 16:40 1598人阅读 评论(0) 收藏 举报

分类：

ASP.NET（3）

使自己做的asp.net网页适应手机浏览：

补充：内容放入table（table居中）中，table宽度700-800px（甚至更大也无所谓），而且内容全部左对齐（针对文字），文字是可以自动换行的和自适应的。而图片和表格不行，为了能够在手机中完美显示，需要设置图片和表格（表格每列显示标题数据等）的宽度不超过340px，而且字体10号（small级别）

或者：

还有就是不要设置太大的具体宽度属性了，比如你在网页把Body的宽度属性设为1000px，这肯定是不行的了，但是可以设置为90%或者100%，这是屏幕自适应的。同时自动适应登录和手机。

通过以下的代码判断是否是手机（后台），如果是手机，如果遇到表格或者图片呈现页面，就要专门转向手机网页页面；前台head中加入手机自适应html

/// <summary>

/// 判断是手机还是电脑在访问

/// </summary>

/// <returns>True:手机访问,False：电脑访问</returns>

private bool Issjdn()

{

string str_u = Request.ServerVariables["HTTP_USER_AGENT"];

Regex b = new Regex(@"android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino", RegexOptions.IgnoreCase | RegexOptions.Multiline);

Regex v = new Regex(@"1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-", RegexOptions.IgnoreCase | RegexOptions.Multiline);

if (!(b.IsMatch(str_u) || v.IsMatch(str_u.Substring(0, 4))))

{

//PC访问

return false;

}

else

{

//手机访问

return true;

}

}

在<head><head/>之间插入以下代码：

[html] view plain copy

  1. <pre name="code" class="html"><meta name="viewport" content="width=device-width,initial-scale=1"/>

参数说明：

width-viewport的宽度是height-viewport的高度

initial-scale：初始的缩放比例

minimum-scale：允许用户缩放到的最小比例

maximum-scale：允许用户缩放到的最大比例

user-scalable：用户是否可以手动缩放

更好的方法：

网页宽度自动适应手机屏幕宽度的方法

标签： 手机

2012-05-04 10:28 91920人阅读 评论(10) 收藏 举报

分类：

HTML/CSS（1）

版权声明：本文为博主原创文章，未经博主允许不得转载。

[html] view plain copy

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

在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。

其中：

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：

[html] view plain copy

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

这样子写后，就可以把一些页头横幅等的图片的宽度都设置成style="width:100%"，整个页面在设备上看起来就是全屏的了。

手机端网页技术--使自己做的asp.net网页适应手机浏览的更多相关文章

  1. Bilibili手机端下载的Download文件批量转换为MP4软件【Bilibili_DownVideoToMp4】原创发布

    Bilibili手机端下载的Download文件批量转换为MP4软件[Bilibili_DownVideoToMp4]原创发布 起因 Bilibili手机端的视频下载下来只能在手机上看,手机屏幕太小看 ...

  2. 自己动手丰衣足食，h5手机端jquery弹窗插件（事件冒泡、单例模式、遮盖部分禁止默认滚动）

    感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc ...

  3. 表单界面的兼容PC手机端解决方案

    就当写一篇随笔吧~上星期还在做加盟模块(兼容微信端),这星期已经加班做快递扫码模块(react+node),所以我感觉只有弹药备足了才能稍微轻松些应对各种需求.实话说在同个部门的大佬面前差距确实大,如 ...

  4. 【web前端】移动端控制台插件，手机端页面查看相关页面控制台信息

    一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试.或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并 ...

  5. 70.JS---利用原生js做手机端网页自适应解决方案rem布局

    利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...

  6. 转！！常用的4种动态网页技术—CGI、ASP、JSP、PHP

    1．CGI   CGI(Common Gateway Interface,公用网关接口)是较早用来建立动态网页的技术.当客户端向Web服务器上指定的CGI程序发出请求时,Web服务器会启动一个新的进程 ...

  7. 用phpcms切换中英文网页的方法（不用解析二级域名）、phpcms完成pc和手机端切换（同一域名）

    AA.phpcms进行双语切换方法(不用解析二级域名)作者:悦悦 博客地址:http://www.cnblogs.com/nuanai/ phpcms进行两种语言的切换,有一把部分的人都是进行的二级域 ...

  8. 移动端调试神器vconsole,手机端网页的调试工具Eruda

    移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...

  9. C#与mysql做ASP.NET网页数据库查询速度测试

    两种方法是:1,使用mysql数据库的存储过程:2,C#编码,做网页后台与mysql数据库连接,前台测试显示测试过结果下面我将分别讲解两种方法的具体实现. 1,使用mysql数据库的存储过程插入万条大 ...

随机推荐

  1. Hadoop生态集群MapReduce详解

    一.概述 MapReduce是一种编程模型,这点很重要,仅仅是一种编程的模型,而不是具体的软件.在hadoop中,HDFS是分布式的文件存储系统,而MapReduce是一个分布式的计算框架.用于大规模 ...

  2. Intellij Idea debug 模式如果发现异常，即添加异常断点在发生异常处

    以前用eclipse的时候,可以根据所抛出的异常进行调试,比如:出现了空指针异常,我想知道是哪一行抛出的,在eclipse中我只需在debug模式下把空指针异常这个名字设置进去,当遇到空指针异常时,e ...

  3. python 对反斜杠的处理问题

    首先,"/"左倾斜是正斜杠,"\"右倾斜是反斜杠,可以记为:除号是正斜杠一般来说对于目录分隔符,Unix和Web用正斜杠/,Windows用反斜杠,但是现在Wi ...

  4. Oracle sqlplus的输出表的排版，数据表发生折行问题

    当查寻数据表的时候,会发生折行的问题 这时,我们可以用下面的语句 设置每行显示的记录长度:set    linesize    300;    --->  每行显示300个字符. 设置每页显示的 ...

  5. shell脚本遍历当前目录下以数字命名的目录，并打印

    #!/bin/bash single='' #定义以个位数为目录的集合double='' #定位十位数为目录的集合#按照需要可以根据实际情况再定义以百位数为目录的集合 for dir in `ls - ...

  6. haier周的计算原则

    现使用oracle的sql表示出haier周, 经过对其生成结果的分析,发现海尔周是以周日到周六分别作为一周的始末, 用到的oracle sql中会涉及到calendar week的定义,还涉及到了I ...

  7. 使用Sitecore的可视化路径分析器工具洞察客户360度行为

    Path Analyzer背后的想法是观察,分析和理解您的潜在客户和客户在浏览您的网站时所遵循的网络旅程.他们最初来自哪里?他们的路径是“有机”(通过搜索引擎)还是来自付费广告?社交帖子?甚至是你发起 ...

  8. VSCode 打开文件tab键空格数量异常问题

    [1]现象与原因 现象:用Notepad++打开文件,tab键占4个空格键.但是,用VSCode打开,tab键缺变成了3个空格键. 原因:因为VSCode默认启用了根据文件类型自动设置tabsize的 ...

  9. Analysis of FCN

    全卷积网络 FCN 详解   背景 CNN能够对图片进行分类,可是怎么样才能识别图片中特定部分的物体,在2015年之前还是一个世界难题.神经网络大神Jonathan Long发表了<Fully ...

  10. libcurl返回常见错误码

    转载:https://blog.csdn.net/kenkao/article/details/46875571 转载:http://www.cnblogs.com/wainiwann/p/34929 ...