HTML5新特性新增语义化标签<header></header> <!--头部标签-->
<nav></nav><!--导航标签-->
<article></article><!--内容标签-->
<section></section><!--定义文档某个区域-
转载
2024-06-07 21:45:04
34阅读
index.html代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.iphone{
margin: 100p
# CSS适配安卓与iOS
移动设备的多样性给前端开发带来了一些挑战，其中之一就是如何有效地适配不同的操作系统，特别是安卓与iOS。在本文中，我们将探讨使用CSS来适配安卓与iOS的一些常见技巧和最佳实践。
## 1. 了解不同操作系统的特性
在开始适配之前，我们首先需要了解不同操作系统的特性和限制。安卓和iOS具有不同的用户界面和默认样式，因此我们需要针对不同的操作系统进行适配。
###
原创
2024-02-03 05:38:02
128阅读
# CSS 判断适配安卓iOS
在前端开发中，我们常常需要为不同的设备和浏览器适配不同的样式。在移动端开发中，最常见的就是安卓和iOS两大操作系统。本文将介绍如何使用 CSS 判断适配安卓和iOS，并提供相应的代码示例。
## 1. CSS 判断浏览器类型
在判断适配安卓和iOS之前，我们首先需要判断用户所使用的浏览器类型。在 CSS 中，我们可以使用 `@media` 媒体查询来针对不同的
原创
2024-02-13 11:12:19
538阅读
首先，谈一下目前为止出现的一些关于移动端适配的技术方案：（1）通过媒体查询的方式即CSS3的meida queries（2）以天猫首页为代表的 flex 弹性布局（3）以淘宝首页为代表的 rem+viewport缩放（4）rem 方式 1.Media Queries（媒体查询） meida queries 的方式可以最常见的移动端自适应布局方式，它主要是通过查询设备的宽度来执
转载
2023-10-08 23:02:29
204阅读
1、CSS:层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。2、C
目前，很多APP设计师小伙伴已经开始转向H5前端开发啦，但是解决所有iPhone和安卓机型的适配问题是我们的重中之重。无论是设计APP还是写前端H5.都是要考虑移动端的兼容性。 今天跟大家来回顾一下H5页面去适配所有iPhone和安卓机型的一些技巧和办法。 回归正题，兼容iphone各版本机型最佳的方式就是自适应。 1、viewport 简单粗暴的方式：<meta name="viewp
转载
2024-01-23 22:55:23
81阅读
不久前，华为发布了P10和P10 Plus手机，很多人不知道 华为P10和P10 Plus有哪些区别 ?这里就给大家介绍，一起来了解下。一、屏幕大小和分辨率不同首先华为P10 Plus和P10最大的区别当然是屏幕变大了，但在屏幕变大的同时，P10 Plus还将原本1080p的分辨率，提升至2K(2560*1440)，显示效果更为细腻。二：相机不同虽然华为P10和P10 Plus都配备了第三代徕卡摄
转载
2023-10-07 10:20:41
136阅读
设计师在做app的时候很少考虑两个平台的差异，在设计上用一套设计稿去做，其实有很多不一样的地方。今天我就针对UI设计中IOS和安卓的设计差异进行简单的说明。 iOS与安卓设计上的差异主要从系统差异、成本考虑、用户习惯3个方面来阐述。 一. 系统差异 1. 物理按键对返回的影响 安卓的物理按键以及屏幕导航按键的差异是安卓的返回键更加方便， iOS只有home
转载
2023-07-26 17:50:53
204阅读
Android适配是一个大坑，你可能早有耳闻。但是别人告诉你坑，然后你也说坑，肯定是无法令人信服的。我们做学问，不能光知其然不知所以然，适配问题到底有多坑，为什么坑，以及如何从坑里爬出来，就是我们今天要探讨的话题了。 这还得从Android的开放性说起。不同于iOS，Android的设备厂商可以生产任意屏幕大小的手机、平板和TV，谷歌对此并没有做任何限制。直接后果就是
转载
2023-10-30 10:21:53
96阅读
# 安卓的1px在iOS中变成了2px
在移动端开发中，我们经常会遇到在不同操作系统下显示效果不一致的情况。其中一个常见的问题就是在安卓和iOS系统中对于1像素边框的处理不同，即在安卓系统中1像素边框可以正常显示，而在iOS系统中1像素边框会变成2像素。这种差异给开发带来了一定的困扰，因此我们需要了解这个问题，并找到相应的解决方案。
## 为什么会出现这个问题？
这个问题的本质是由于安卓和i
原创
2023-11-24 06:36:11
113阅读
一、屏幕适配iOS的屏幕适配可以分为3大块，代表着不同时期的屏幕适配主流：
AutoResizing：
在iOS6之前，完全能够胜任，因为当时苹果只有3.5寸屏，加上比较少的支持横屏，它有非常大的局限性：只能相对于父控件布局
AutoLayout：
在iOS6之后，苹果多了几个尺寸屏幕，AutoResizing已经无能为力了，这时候苹果推出了AutoLayout，功能十分强大，可以再任意两个控件之
前言：以前做feature phone的朋友，特别是MMI的，对各公司出的分辨率适配，估计都叫烦，以为做智能机开发了，算好点了，可是，现在又涉及到各分辨率（主流）的适配了。目前，Android主流分辨率有： 1. Density 为 1.5的有：480x800, 480x854, 540x960； &nb
转载
2023-12-11 15:58:00
78阅读
chrome devtools 是前端开发再也熟悉不过的调试工具了。那么我们究竟有多了解它，这里总结了一些常用的CSS调试操作。查看CSS查看元素对应的样式1、打开调试工具，点击调试工具左上角的检查元素按钮或者快捷键（Ctrl/Cmd + Shift + C） 2、在页面选中需要查看的元素，被检查的元素在DOM树中以蓝色背景突出显示，样式在右侧 styles 选项卡区域内。查看外部样式表1、在 s
转载
2023-09-27 18:41:51
242阅读
/** * 单位转换工具 * * @author carrey * */ public class DisplayUtil { /** * 将px值转换为dip或dp值，保证尺寸大小不变 ...
转载
2016-11-03 09:34:00
67阅读
# uni-app适配安卓和iOS的完整流程教程
在开发移动应用时，尤其是使用uni-app框架，了解如何同时适配安卓和iOS是至关重要的。这篇文章将指导你如何实现uni-app在两大平台上的适配，并提供具体的代码示例供大家参考。
## 开发流程概述
在开始之前，我们来看看整个适配过程的步骤。以下是我们开发的基本流程：
| 步骤 | 描述
rem 作为一个低调的长度单位，由于手机端网页的兴起，在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下，通过等比缩放的方式达到设计图要求的效果。rem 的官方定义『The font size of the root element.』，即以根节点的字体大小作为基准值进行长度计算。一般认为网页中的根节点是 html 元素，所以采用的方式也是通过设置 html 元素的 f
转载
2024-08-07 08:06:12
21阅读
移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，需要对HTML5和CSS3有一定的了解。1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用 &nbs
转载
2024-05-29 01:00:11
122阅读
方案一IOS与Android共用一套效果图 1242*2208IOS与Android常用的尺寸中，最大尺寸的为i6+的尺寸，即1242*2208pxIOS常用尺寸为1242*2208 750*1334 640*1136 640*960其中750*1334 640*1136 640*960同
转载
2023-07-17 13:47:07
200阅读
工作了有一段时间，基本上都在搞移动端的前端开发，工作的过程中遇到过很多问题，bug的解决方案，记录下来，以便后用！！！内容并不是很全，以后每遇到一个问题都会总结在这里，分享给大家！一、meta标签相关知识1、移动端页面设置视口宽度等于设备宽度，并禁止缩放。2、移动端页面设置视口宽度等于定宽(如640px)，并禁止缩放，常用于微信浏览器页面。3、禁止将页面中的数字识别为电话号码4、忽略Android
转载
2024-04-29 11:14:52
287阅读
