手机移动端web默认字体



1、ios 系统


(1)、默认中文字体是Heiti SC

(2)、默认英文字体是Helvetica

(3)、默认数字字体是HelveticaNeue

(4)、无微软雅黑字体

 


2、android 系统


(1)、默认中文字体是Droidsansfallback

(2)、默认英文和数字字体是Droid Sans

(3)、无微软雅黑字体

 


3、winphone 系统


(1)、默认中文字体是Dengxian(方正等线体)

(2)、默认英文和数字字体是Segoe

(3)、无微软雅黑字体



参考资料: 移动端web字体    http://www.studyofnet.com/news/1062.html

 

 

### 移动端 Web 开发中的一套代码多端适配最佳实践 #### 使用 `rem` 单位实现屏幕适配 在移动端 Web 页面开发中,`rem` 是一种相对单位,其大小基于根元素 `<html>` 的字体大小。通过动态调整根元素的字体大小,可以实现页面元素按比例缩放的效果[^1]。这种方法能够很好地应对不同屏幕尺寸和分辨率的需求。 以下是设置 `rem` 基准值的一个常见 JavaScript 方法: ```javascript function setRem() { const docEl = document.documentElement; const clientWidth = docEl.clientWidth || 320; // 默认最小宽度为320px const fontSize = (clientWidth / 10); // 设定设计稿宽为10份的比例关系 docEl.style.fontSize = `${fontSize}px`; } setRem(); window.addEventListener('resize', setRem); ``` #### CSS Media Queries 结合流式布局 除了使用 `rem`,还可以结合 CSS Media Queries 来定义不同的样式规则以适应各种设备。Media Queries 可以检测屏幕宽度、高度以及其他特性,并应用相应的样式[^3]。例如: ```css /* 针对手机 */ @media screen and (max-width: 768px) { body { font-size: 14px; } } /* 针对平板 */ @media screen and (min-width: 769px) and (max-width: 1024px) { body { font-size: 16px; } } /* 针对 PC 端 */ @media screen and (min-width: 1025px) { body { font-size: 18px; } } ``` #### Vue.js 中的多端适配策略 对于基于 Vue.js 构建的应用程序,可以通过检测屏幕宽度来决定加载哪一部分组件或样式文件。这种方式允许开发者针对特定平台提供优化后的用户体验[^4]。下面是一个简单的例子: ```javascript // 判断当前设备类型并切换视图逻辑 export default { data() { return { isMobile: false, }; }, mounted() { this.checkDeviceType(); window.addEventListener('resize', () => this.checkDeviceType()); }, methods: { checkDeviceType() { this.isMobile = window.innerWidth < 768; }, }, }; ``` 随后,在模板部分可以根据变量状态渲染对应的内容: ```vue <template> <div v-if="isMobile">这是移动端界面</div> <div v-else>这是桌面端界面</div> </template> ``` #### 性能优化建议 无论采取何种技术手段完成多端适配,都应关注性能问题。减少不必要的 DOM 操作以及图片资源请求量尤为重要。此外,利用懒加载技术和 CDN 加速静态资产下载速度也是提升整体表现的有效措施之一[^2]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值