asp.net 页面,文字自适应手机屏幕
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
(2)Asp.Net MVC 从第四版开始就支持移动端了。通过设置HttpContext.Cahce和HttpContext.Items来调整需要输出设别的现实模式,通过DisplayModel自动识别当前设备是PC端还是Mobile端。PC意是指电脑端,Mobile可以是安卓,塞班,苹果或者已经被淘汰的WinPhone.
当调用ViewResultBase的ExecuteResult函数寻找ViewEngineResult的时候,VirtualPathProviderViewEngine调用FindView 。
代码如下:IEnumerable<IDisplayMode> possibleDisplayModes = DisplayModeProvider.GetAvailableDisplayModesForContext(controllerContext.HttpContext, controllerContext.DisplayMode);
如果当前网页是PC端possibleDisplayModes会会被一个空的默认的DefaultDisplayMode填充,然后通过构建当前程序集标识把得到的虚拟路径存入Contexx.Cache。如果当前是移动端,通过Context.Cache搜寻到上次缓存的预留项,返回给当前视图引擎ViewEngine,最后呈现出各种设备所不同的结果。
.Net MVC的移动端原理就这么多了。看似似乎有点麻烦,由于微软高度的抽象,所有实现起来非常容易。
假如说,你当前有个控制器HomeController,里面有个Index方法。
public class HomeController : Controller
{
[HttpPost]
public ActionResult Index(Models.DemoModel DL)
{
return View();
}
[HttpGet]
public ActionResult Index()
{
return View();
}
视图的虚拟路径应该为 View/Home/Index.cshtml。
我们要做的就是在 View文件夹下面添加一个Index.Mobile.csthml页面。
所有工作至此结束了,如果你是PC端,你访问Home/Index的时候,他会自动识别和展示Index.cshtml视图,如果你访问的是移动端,他也会自动调整页面模式现实为Index.Mobile.cshtml。
注意:Mobile是关键字,不能随意更改。
如果你想要做出漂亮的手机端页面,你可以引入 JQuery Mobile类库,在Cshtml里面开发出各种绚丽的效果
方法2原文链接:https://blog.csdn.net/tangyanzhi1111/article/details/81588397
https://www.infoq.cn/article/Hybrid-Mobile-Apps-MVC/ 一个案例
asp.net 页面,文字自适应手机屏幕的更多相关文章
- 移动页面HTML5自适应手机屏幕宽度
标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...
- HTML5 移动页面自适应手机屏幕四类方法
1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...
- 》》HTML5 移动页面自适应手机屏幕四类方法
1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...
- 移动端H5页面自适应手机屏幕宽度
1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem ...
- web页面自适应手机屏幕宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...
- flexible.js在华某为手机上使用rem时,页面宽度超出手机屏幕宽度
问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom ...
- WAP网站WML或HTML页面自适应手机屏幕实现方法
把图片和div的宽度都设置成:width:100%就可以了
- 使PC端网页宽度自适应手机屏幕大小
有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...
- 移动端页面按手机屏幕分辨率自动缩放的js
<script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.scr ...
随机推荐
- 二进制部署Redis-5.07
Redis简介 Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理. 它支持字符串.哈希表.列表.集合.有序集合,位图,hyperloglogs等数据类 ...
- C#与sql进行图片存取
1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Da ...
- es使用--新建、删除、增删改数据
# 进入bin目录 cd /czz/elsearch/bin # 后台启动(不加-d参数则是前台启动,日志在控制台) # 后台启动日志如果不配置,在es目录的logs下面 ./elasticsearc ...
- Linux系统安装JDK1.8
2020最新Linux系统发行版ContOS7演示安装JDK. 为防止操作权限不足,建议切换root用户,当然如果你对Linux命令熟悉,能够自主完成权限更新操作,可以不考虑此推荐. 更多命令学习推荐 ...
- 1、微信小程序开发介绍。
微信小程序如何能达到快速的开发效果,下面首先介绍一下需要的框架,使用这些框架可以减少大部分编写代码时间. 微信小程序使用的框架:weui开源框架 后端数据使用的框架(包含管理和api接口框架):YiS ...
- day18 Pyhton学习 内置函数最后七个
1. enumerate 枚举函数 for i in enumerate(['a','b','c'],1): print(i)#(1, 'a')(2, 'b')(3, 'c') goods_lst= ...
- Verilog基础入门——Vivado流水灯工程(四)(实验报告)
今日进行了数字逻辑实验,完成了一个最简单的FPGA设计,即流水灯设计. 此处记录我们的指导文件以及实验报告,同时记录遇到的问题及解决方法. 一.vivado工程源文件编写 counter.v文件 `t ...
- nginx优化:使用expires在浏览器端缓存静态文件
一,nginx中expires指令的作用 网站的图片等静态文件一旦发布,通常很少改动, 为了减小对服务器请求的压力,提高用户浏览速度, 我们可以设置nginx中的expires, 使用户访问一次后,将 ...
- HTML5/HTML 4.01/XHTML 元素和有效的 DTD
HTML5/HTML 4.01/XHTML 元素和有效的 DTD 下面的表格列出了所有的 HTML5/HTML 4.01/XHTML 元素,以及它们会出现在什么文档类型 (DTD) 中: 标签 HTM ...
- 某次burp抓包出错的解决办法
前些日子同事发微信问我一个问题 没听懂他说的没回显是啥意思,于是叫他把站发给我. 浏览器不挂burp代理能正常打开,挂上burp代理以后浏览器显示连接超时 首先测试burp能抓其他的包应不是这个原因 ...