（1）在<head>和</head>之间插入代码。
<meta name="viewport" content="width=device-width, initial-scale=1" /> 

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 页面，文字自适应手机屏幕的更多相关文章

  1. 移动页面HTML5自适应手机屏幕宽度

    标签: 网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方. 1.使用meta标签,这也是普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的, ...

  2. HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

  3. 》》HTML5 移动页面自适应手机屏幕四类方法

    1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...

  4. 移动端H5页面自适应手机屏幕宽度

    1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点击菜单中的preferences下的browse packages,选择cssrem-master,添加或者编写cssrem ...

  5. web页面自适应手机屏幕宽度

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

  6. flexible.js在华某为手机上使用rem时，页面宽度超出手机屏幕宽度

    问题:手机端项目在华为的某款手机上显示时页面内容没有自适应手机宽度,出现横向滚动条 原因:手机获取手机屏幕宽度并计算出rem时出现偏差,明显宽余真实手机屏宽度 解决方案一:在页面里获取页面最外层dom ...

  7. WAP网站WML或HTML页面自适应手机屏幕实现方法

     把图片和div的宽度都设置成:width:100%就可以了

  8. 使PC端网页宽度自适应手机屏幕大小

    有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...

  9. 移动端页面按手机屏幕分辨率自动缩放的js

    <script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.scr ...

随机推荐

  1. Springboot应用使用Docker部署

    首先准备好springboot应用,然后打包,我这里已经准备好了一个jar包 然后上传到服务器,准备一个目录用于存放jar包和Dokerfile文件 编写Dokerfile文件 我这里写的很简单,就简 ...

  2. Python 导入模块的两种方法：import xxx 和from...import xxx

    import 方式导入模块 import tool.getsum.add # 导入模块,优先会从启动文件的当前目录开始寻找 # 如果找到,就使用 # 如果找不到,会在系统模块存放目录去 tool.ge ...

  3. linux处理l2tp协议的示意图

  4. 通过MapReduce降低服务响应时间

    在微服务中开发中,api网关扮演对外提供restful api的角色,而api的数据往往会依赖其他服务,复杂的api更是会依赖多个甚至数十个服务.虽然单个被依赖服务的耗时一般都比较低,但如果多个服务串 ...

  5. pytest文档52-命令行参数--setup-show查看fixture的执行过程

    前言 使用命令行运行 pytest 用例的时候,看不到 fixture 的执行过程. 如果我们想知道fixture的执行过程和先后顺序,可以加上 --setup-show 命令行参数,帮助查看 fix ...

  6. 【博弈论】51Nod 1534 棋子游戏

    题目内容 波雷卡普和瓦西里喜欢简单的逻辑游戏.今天他们玩了一个游戏,这个游戏在一个很大的棋盘上进行,他们每个人有一个棋子.他们轮流移动自己的棋子,波雷卡普先开始.每一步移动中,波雷卡普可以将他的棋子从 ...

  7. centos8平台使用mpstat监控cpu

    一,mpstat的用途 mpstat是 Multiprocessor Statistics的缩写,是实时cpu监控工具. 在多CPU系统里,其不但能查看所有CPU的平均状况信息,而且能够查看特定CPU ...

  8. 教你怎么写jQuery的插件

    jQuery(以下简称JQ)是一个功能强大而又小巧的JS框架,现在很多网站都在使用JQ,本站也不例外.本文教大家如何写一个属于你自己的JQ插件. 本JQ插件例子是在你网站的文章结尾处添加你的版权. J ...

  9. SpringBoot整合日志log4j2

    SpringBoot整合日志log4j2 一个项目框架中日志都是必不可少的,随着技术的更新迭代,SpringBoot被越来越多的企业所采用.这里简单说说SpringBoot整合log2j2日志. 一. ...

  10. 使用creata-react-app脚手架创建react项目时非常慢的问题

    创建react项目必须要有下面两个步骤 cnpm install -g create-react-app  //创建react全局变量 create-react-app my-app //创建一个re ...