（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. 使用css实现轮播图

    使用css3实现图片轮播 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等. 本文主要讲述使用纯css3实现轮播图 工具介绍: 使用的编辑器: Hbuilder 进入正题 html代码: ...

  2. 8.Android-简单的登录案例编写

    本章来学习登录案例,由于还未学习自定义控件外观,所以ui界面先用最简单的,并保存登录账号密码到data/data/包名/files下 1.学习之前需要掌握的Context类(通过Context来往AP ...

  3. 多测师讲解python _unttest框架002（结合项目实战）_高级讲师肖sir

    第一种调用方法: if __name__ == '__main__':# #第一种运行方法:运行所有的用例 import unittestfrom selenium import webdriverf ...

  4. 关于 Promise 的一些简单理解

    一.ES6 中的 Promise 1.JS 如何解决 异步问题? (1)什么是 同步.异步? 同步指的是 需要等待 前一个处理 完成,才会进行 下一个处理. 异步指的是 不需要等待 前一个处理 完成, ...

  5. 2019年CSP-J初赛试题（普及组）试题详解

    https://www.jianshu.com/p/9e58f455c1ee https://blog.csdn.net/weixin_39104847/article/details/1086711 ...

  6. 阿里百秀后台管理项目笔记 ---- Day01

    摘要 在此记录一下阿里百秀项目的教学视频的学习笔记,部分页面被我修改了,某些页面效果会不一样,基本操作是一致的,好记性不如烂笔头,加油叭!!! step 1 : 整合全部静态页面 将静态页面全部拷贝到 ...

  7. Linux操作系统的基本介绍

    01 操作系统的概述介绍 操作系统(Operating System,简称OS)是管理计算机硬件与软件资源的计算机程序.操作系统需要处理如管理与配置内存.决定系统资源供需的优先次序.控制输入设备与输出 ...

  8. 50种编程语言，一句 “Hello, World”！展现编程语言七十年发展！

    mod confinment { use std::os::raw::{c_char}; extern "C" { pub fn puts(txt: *const c_char); ...

  9. WebFlux快速上手

    一.新建项目 示例使用IDEA快速创建基于SpringBoot的工程. springboot 2.3.1 java 8 WebFlux 必须选用Reactive的库 POM 依赖 <depend ...

  10. spring boot:构建多模块项目(spring boot 2.3.1)

    一,为什么要使用多模块? 1,结构更清晰,方便管理    如果只是一个小项目当然没有问题,    但如果功能越增越多则管理越来越复杂,    多模块可以使项目中模块间的结构分离   2,把项目划分成多 ...