摘要：一手机端开发页面必须要加一段代码注这段代码的主要意思是让页面宽度等于设备宽度，缩放比例为，禁止用户缩放。用于检测视口，主要的效果就是取消下面的滚动条，让页面适应屏幕。
一.手机端开发页面必须要加一段代码：
注：这段代码的主要意思是：让页面宽度等于设备宽度，缩放比例为1，禁止用户缩放。用于检测视口，主要的效果就是取消下面的滚动条，让页面适应屏幕。
二.为自己的页面设置最大宽度和最小宽度：
{
max-width:640px;
min-width:320px;
}
主要作用是在屏幕足够大的时候，页面也不会失真。
三.兼容手机屏幕大小不同的情况：
window.onload=window.onresize=function(){
document.documentElement.style.fontSize = document.documentElement.clientWidth*40/640+"px";
};
在写移动端页面的时候要加上这一段代码，这段代码意思是：让视口或者说页面的可见宽度与根元素的字符大小产生对应关系，例如上面这段代码意思是在视口宽度为640px的时候，让根元素的字符大 小为40px（也就是1rem等于40px），这样在视口不断变化的时候，根元素的字符大小也会不断变化，而且有固定的系数（1/16），这样就产生了对应关系，也就是兼容了不同屏幕大小不一样的情况。
具体用法：引用上述js代码，在设计图640px的情况下测量距离，然后在把距离除以40，并把px为rem，这样就可以了，注：js里的40和640可以根据需要灵活更改，但要注意字符默认情况下最小为12px且widow.onload在只能出现一次。
四.去掉 a，input 在移动端浏览器中的默认样式
1.禁止 a 标签背景
在移动端使用 a标签做按钮的时候，点按会出现一个“暗色”的背景，去掉该背景的方法如下：
a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
2.禁止长按 a，img 标签长按出现菜单栏
使用 a标签的时候，移动端长按会出现一个 菜单栏，这个时候禁止呼出菜单栏的方法如下
a, img {
-webkit-touch-callout: none;
}
3.流畅滚动
body{
-webkit-overflow-scrolling:touch;
}
4.修改webkit表单输入框placeholder的样式
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
5.禁止ios和android用户选中文字
.css{-webkit-user-select:none}
五. 其他
1.手机拍照和上传图片
2.取消input在ios下，输入的时候英文首字母的默认大写
3.打电话和发短信
打电话给:0755-10086 发短信给: 10086
viewport模板
title
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91704.html
摘要：一手机端开发页面必须要加一段代码注这段代码的主要意思是让页面宽度等于设备宽度，缩放比例为，禁止用户缩放。用于检测视口，主要的效果就是取消下面的滚动条，让页面适应屏幕。 一.手机端开发页面必须要加一段代码： 注：这段代码的主要意思是：让页面宽度等于设备宽度，缩放比例为1，禁止用户缩放。用于检测视口，主要的效果就是取消下面的滚动条，让页面适应屏幕。 二.为自己的页面设置最大宽度和最小宽...
摘要：一手机端开发页面必须要加一段代码注这段代码的主要意思是让页面宽度等于设备宽度，缩放比例为，禁止用户缩放。用于检测视口，主要的效果就是取消下面的滚动条，让页面适应屏幕。 一.手机端开发页面必须要加一段代码： 注：这段代码的主要意思是：让页面宽度等于设备宽度，缩放比例为1，禁止用户缩放。用于检测视口，主要的效果就是取消下面的滚动条，让页面适应屏幕。 二.为自己的页面设置最大宽度和最小宽...
摘要：本文适合的读者现在在手淘，京东，今日头条，美柚等过亿用户的手机中的，都常见网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个的例子手淘，美柚。 本文适合的读者???? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（手淘，美柚）。这些app中都嵌者数以百计，千计的...
阅读 3096·2021-11-24 09:39
阅读 948·2021-09-07 10:20
阅读 2369·2021-08-23 09:45
阅读 2231·2021-08-05 10:00
阅读 526·2019-08-29 16:36
阅读 818·2019-08-29 11:12
阅读 2798·2019-08-26 11:34
阅读 1825·2019-08-26 10:56
