web开发中css布局 iPhone 调试方法

在web开发中做兼容是一个必然少不了的问题，这里将介绍我在开发过程中适配iPhone浏览器时的调试方法

首先我想说的是既然我们要知道我们所写的代码运行在iPhone浏览器上会遇到什么问题，那么先得解决的问题是让代码在iPhone浏览器上跑起来，有两种方式可以解决这个问题，

1，模拟器

  chrome模拟
  safari 模拟
  xcode模拟

2，真机

在开发过程中绝大多数情况下用的是模拟器，所以这里主要讨论模拟器调试

第一种方法，chrome调试，

  在下图中‘1’的位置是使用哪种手机进行调试，图中使用的是iPhone 5

  同时点开位置‘1’的下拉列表可以选择其他手机模式进行调试，包括苹果，安卓等等。

  同时可以对下拉列表的手机类型选择进行设置，点开下拉列表，再点击最下面的edit，右边就会出现‘3’这部分内容，在‘3’这里可以选择不同的调试设备显示在‘1’的下拉列表里面以供选择

  图中‘2’可以设置界面以多大的比例进行显示

image.png

在chrome 中使用开发者模式，大多数情况下chrome调试是没有问题的，但是不能100%保证在chrome模拟上正常显示的样式在真机上正常显示，下面将介绍两种更加接近真机的调试方法

第二种方法 Safari 调试

  前提:mac电脑，安装Safari浏览器

  首先需要对Safari进行设置，选择Safari -> 偏好设置 -> 高级 -> 把下图中红色方框里面的选项选中

image.png

 然后在上面状态栏会出现‘开发’字样，然后一次选择开发 -> 进入响应设计模式，打开后页面会如下显示 

image.png

在上图中，红色框‘1’提供手机类型选择，红色框‘2’显示页面内容，。也可以像其他浏览器一样查看网页源代码，只需要在页面右击鼠标，查看元素即可

第三种方法，xcode调试，

前提：mac电脑，安装xcode

 1，打开xcode 
  2，右击导航栏xcode图标，选择 open developer tool 
  3，再选择simulator 
  4,等打开成功后界 通iPhone相同，可进 相关测试

如下图

image.png

5,在测试中可以选择苹果相关机型进行测试，选择方法如下：选中软件->屏幕左上状态栏"Hardware" -> "Device" -> "IOS 10.3"(该目录下有很多机型选择，可按需选择）；
6.当打开一个软件，需要回到home界面时，操作方法如下：选中软件->屏幕左上状态栏"Hardware" -> "Home"；
7.还有一种需求是在模拟器上安装app,但是有这样一个问题“苹果的iOS模拟器是X86指令的，安装不了真正的App，你用模拟器测试的时候，都是编译器生成的x86代码在模拟器里面跑，真正的程序的安装包里面是不包含x86代码的”，所以直接在模拟器上安装app是不行的，不过八仙过海，我们可以曲线解决这个问题，下面是一些网上一些大神探索的方法，这里引用一下：A，http://debugtalk.com/post/build-app-automated-test-platform-from-0-to-1-Appium-inspector-iOS-simulator/
B，http://www.jianshu.com/p/cd4c816111db

上面三种方法是在开发过程中常用的方法，第四种方法不常用但是有着决定性作用，那就是真机

第四种方法：真机

真机就是直接在iPhone手机上运行了，如果你的代码在真机上都没有问题，那其他的都是浮云了