简体   繁体   English

在具有指定样式的 Web 浏览器中显示 Ionic App

[英]Display Ionic App In Web Browser With Specified Styling

I have an Ionic app that I am working on.我有一个正在开发的 Ionic 应用程序。 I have an Android device that I can test it on, but I do not have a way to test my app on iOS. Is it possible to test my app (visually only, not native functionality) for iOS without having a physical iOS device?我有一个可以测试它的 Android 设备,但我没有办法在 iOS 上测试我的应用程序。是否可以在没有物理 iOS 设备的情况下针对 iOS 测试我的应用程序(仅视觉上,而不是本机功能)?


I have tried work arounds and searched for other solutions, but came up empty.我已经尝试变通并寻找其他解决方案,但一无所获。

I tried to get a virtual machine of MacOS, but ran into many problems.我试图获得 MacOS 的虚拟机,但遇到了很多问题。 Tried for days to fix it, but nothing worked, even the ones that people said worked for their same situation.尝试了好几天来修复它,但没有任何效果,即使是人们所说的适用于相同情况的那些。

Attempted to use Safari to test it, but the only way to get Safari on Windows is downloading an old, out-dated version, since it is no longer supported for Windows. And that version doesn't support arrow functions, and so my app doesn't work, since Angular's styles.js and many other files use them.尝试使用 Safari 对其进行测试,但在 Windows 上获取 Safari 的唯一方法是下载旧的、过时的版本,因为 Windows 不再支持它。而且该版本不支持箭头功能,所以我的应用程序不起作用,因为 Angular 的 styles.js 和许多其他文件使用它们。


Is there something in Ionic files that I can specify which styles to apply when displaying on the web?在 web 上显示时,我可以指定要应用哪个 styles 的 Ionic 文件中有什么东西吗?
Is there any another way to do this without getting an iOS device?如果没有 iOS 设备,还有其他方法可以做到这一点吗?

In case the purpose is to see the design and navigation of app how it will be here are the below two steps:如果目的是查看应用程序的设计和导航,请执行以下两个步骤:

First,in modern browsers, if right click on the page, then click inspect.首先,在现代浏览器中,如果右键单击页面,然后单击检查。

At this point you can insert CTRL + SHIFT + M so it will open dev tools bar at the to top of the browser in-screen, so you can choose the device you need to display like android or ios then refresh the page to make sure all the designs get loaded properly as per the selected device type..此时你可以插入CTRL + SHIFT + M这样它就会在浏览器屏幕顶部打开开发工具栏,所以你可以选择你需要显示的设备,比如 android 或 ios 然后刷新页面以确保所有设计都根据所选设备类型正确加载。

Another way which could be more efficient if you don't wanna go with this approach which is:如果您不想 go 使用这种方法,另一种可能更有效的方法是:

in your app.module.ts,在你的 app.module.ts 中,

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot({ 
      mode: 'ios'
     }),
    AppRoutingModule,
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  ],
  bootstrap: [AppComponent],
})

so in the IonicModule forRoot you specify ios to apply ios design for your whole app.因此,在 IonicModule forRoot 中,您指定 ios 为整个应用程序应用 ios 设计。

Now in case you need to test app as native functionality then for sure the solution would not be web approach.. you just in this case to install a vmware then install a macOS version on it, then install xcode and then test your app normally on a simulator and still some things may not function as a real device..现在,如果您需要将应用程序作为本机功能进行测试,那么可以肯定的是,解决方案不会是 web 方法。在这种情况下,您只需安装一个 vmware,然后在其上安装 macOS 版本,然后安装 xcode,然后正常测试您的应用程序一个模拟器,还有一些东西可能不是 function 作为一个真实的设备..

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM