手机开发

/smaller than 1920/

@media screen and (max-width: 1920px) { body{font-size:32px;} }

/smaller than 1440/

@media screen and (max-width: 1440px) { body{font-size:18px;} }

/smaller than 1024/

@media screen and (max-width: 1024px) { body{font-size:18px;} }

/smaller than 980/

@media screen and (max-width: 980px) { body{font-size:16px;} }

/smaller than 650/

@media screen and (max-width: 650px) { body{font-size:16px;} }

/smaller than 480/

@media screen and (max-width: 480px) { body{font-size:16px;} }

/smaller than 360/

@media screen and (max-width: 360px) { body{font-size:14px;} }

/smaller than 320/

@media screen and (max-width: 320px) { body{font-size:12px;} }

/smaller than 240/

@media screen and (max-width: 240px) { body{font-size:10px;} }

添加到主屏幕“后，全屏显示

<meta name="apple-mobile-web-app-capable" content="yes" />

这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

<meta name=”apple-mobile-web-app-status-bar-style” content=black” />

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

在iOS中有两个meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，这两个会让网页内容以应用程序风格显示，并使状态栏透明。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />

说明：这个link就是设置web app的放置主屏幕上icon文件路径。图片尺寸可以设定为5757（px）或者Retina可以定为114114（px），ipad尺寸为72*72（px）

<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />//将不识别邮箱

告诉设备忽略将页面中的数字识别为电话号码

iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时，在手机HOME界面创建应用程序样式的图标。

<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />

linweijian commented 6 years ago

@media screen 针对不同移动设备

device-pixel-ratio：定义输入设备屏幕的可视宽度与可见高度比率。

device-width：输入设备屏幕的可视宽度。

orientation ：屏幕横竖屏定向。landscape 是横向，portrait 是纵向【ipad 相反】

/ iPhone 4 ———– /
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/ Styles /
}
/ iPads (portrait) ———– /
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/ Styles /
}
/ Smartphones (portrait and landscape) ———– /
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/ Styles /
}
/ Smartphones (landscape) ———– /
@media only screen
and (min-width : 321px) {
/ Styles /
}
/ Smartphones (portrait) ———– /
@media only screen
and (max-width : 320px) {
/ Styles /
}
/ iPads (portrait and landscape) ———– /
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/ Styles /
}
/ iPads (landscape) ———– /
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/ Styles /
}
/ iPads (portrait) ———– /
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/ Styles /
}
/ Desktops and laptops ———– /
@media only screen
and (min-width : 1224px) {
/ Styles /
}
/ Large screens ———– /
@media only screen
and (min-width : 1824px) {
/ Styles /
}
/ iPhone 4 ———– /
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/ Styles /
}

linweijian commented 6 years ago

webkit内核浏览器的CSS写法

-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明 -webkit-user-select: none; 设置为无法选择文本 -webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片 :-webkit-full-screen canvas {} 全屏模式时的样式(for Desktop) div p :matches(em, b, strong) {} 使用mathes来匹配多个选择器 @media only screen and (max-width: 480px) {} 指定Mobile设备或者小屏幕桌面屏幕 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 300dpi) { 指定高分辨率屏幕设备 header { background-image: url(header-highres.png); } } @media (-webkit-max-device-pixel-ratio: 1.5),(max-resolution: 299dpi) { 指定低分辨率屏幕设备 header { background-image: url(header-lowres.png); } } background-repeat: space; background-repeat: round; 这两种CSS3的背景属性值得研究 width: calc(100%-40px); 计算宽度 text-decoration: #FF8800 wavy ine-through; 波浪型链接 text-rendering: optimizeLegibility; 用这个属性之后会收紧字符间的距离 font-variant-ligatures: common-ligatures; 设置CSS连字 transform: rotate(90); 旋转90度 transform-origin: center center; transform-origin可以改变变换的位置 -webkit-appearance: none; -webkit-appearance可以改变按钮或者其它控件看起来类似本地的控件美化表单校验时的提示样式 ::-webkit-validation-bubble {} ::-webkit-validation-bubble-message {} ::-webkit-validation-bubble-arrow {} ::-webkit-validation-bubble-arrow-clipper {}当提示出现时类似于下面的结构 <div -webkit-validation-bubble> <div -webkit-validation-bubble-arrow>

linweijian commented 6 years ago

-webkit-text-size-adjust

1、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;}

2、-webkit-text-size-adjust放在body上会导致页面缩放失效

3、body会继承定义在html的样式

4、用-webkit-text-size-adjust不要定义成可继承的或全局的

Chrome27正式取消了-webkit-text-size-adjust属性

linweijian / linweijian.github.io

css备录 #1

手机开发

@media screen 针对不同移动设备

webkit内核浏览器的CSS写法

-webkit-text-size-adjust