使自己做的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. 四、latex字体字号设置

    latex的思想是格式与内容的分离,所以不建议在文中使用大量命令,而是定义一个新的命令

  2. java8模拟grouby方法

    public class ListUtils{ /** * list 集合分组 * * @param list 待分组集合 * @param groupBy 分组Key算法 * @param < ...

  3. Software Testing 1 —— 有关编程错误的经历

    最令我印象深刻的程序错误几乎都是那些细节,具体的记不清了,因为真的很细.他们不会报正常的错,要么是时而可以正常运行,时而不能正常运行但是没有报错,比如闪退或者持续运行没有输出:要么是报的错误意义很宽泛 ...

  4. linux挂载概念简述：

    挂载概念简述: 根文件系统之外的其他文件要想能够被访问,都必须通过“关联”至根文件系统上的某个目录来实现,此关联操作即为“挂载”,此目录即为“挂载点”,解除此关联关系的过程称之为“卸载” 1.挂载:根 ...

  5. C#-----类FileStream的使用

    1.枚举类FileMode 指定操作系统打开文件的方式 CreateNew  指定操作系统应创建一个新的文件 Create  指定操作系统应创建一个新的文件. 如果该文件已存在,则会覆盖它 Open  ...

  6. HTML常用标签定义，用法及例子

    1.HTML注释 <!--...--> 定义:使用注释可对代码进行解释,不会显示在浏览器中. <!--这是一段呢注释.注释不会在浏览器中显示.--> <p>段落标签 ...

  7. windows 如何创建硬链接

    输入代码:mklink /d F:\ D:\pdf mklink /d 是命令语句,空格,接着是放置硬链接的位置,空格,再是目标文件夹.

  8. python locust 性能测试：locsut参数化-保证并发测试数据唯一性，不循环取数据

    from locust import TaskSet, task, HttpLocustimport queue class UserBehavior(TaskSet): @task def test ...

  9. 艾妮记账本Web开发（开发版）

    因为没有办法制作微信小程序版的艾妮记账本所以只能选择做Web开发版,但因为是花时间赶出来到的(但用了我已学的所有Web知识)所以就没有办法按老师的要求写七天的制作过程. 其实真正说起来我的这个Web开 ...

  10. P4777 【模板】扩展中国剩余定理（EXCRT）/ poj2891 Strange Way to Express Integers

    P4777 [模板]扩展中国剩余定理(EXCRT) excrt模板 我们知道,crt无法处理模数不两两互质的情况 然鹅excrt可以 设当前解到第 i 个方程 设$M=\prod_{j=1}^{i-1 ...