safari 浏览器提示添加到主屏幕,在iOS Safari上调试添加到主屏幕的Web应用

I'm trying to debug a web app that is added to home screen. I have enabled web inspector on safari. I am able to debug the app if I open in iOS safari but when I add the app to home screen and try to debug, it shows 'No Inspectable Applications'. Any help would be appreciated.

iOS version: 11.2

MacOS Safari version: 11.0.1

解决方案

Not sure if it's related, I had an issue where I couldn't get the inspector window to open for a cordova web app on iOS 11.2

I found that I had to go back to (ios) settings and toggle Safari Web Inspector off and on while looking at the (osx safari) developer menu to see it and then inspect it.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以通过在网站的HTML代码中添加一个特定的meta标签来更改iOSSafari中“添加屏幕”的URL地址。具体操作步骤如下: 1. 在您的网站HTML代码的head标签中添加以下代码: ```html <link rel="apple-touch-icon" href="path/to/icon.png"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-title" content="Your App Name"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-startup-image" href="path/to/startup.png"> <link rel="manifest" href="path/to/manifest.json"> ``` 其中,`href`属性中的`path/to/icon.png`和`path/to/startup.png`分别为您的网站图标和启动画面的路径,`content`属性中的`Your App Name`为您的网站名称。 2. 创建一个名为`manifest.json`的文件,其中包含以下代码: ```json { "name": "Your App Name", "short_name": "Your App Short Name", "icons": [ { "src": "path/to/icon.png", "sizes": "192x192", "type": "image/png" }, { "src": "path/to/icon.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/", "display": "standalone", "theme_color": "#ffffff", "background_color": "#ffffff" } ``` 其中,`name`和`short_name`分别为您的网站名称和简称,`icons`中包含您的网站图标的路径和尺寸,`start_url`为您的网站地址,`display`为网站的显示模式,`theme_color`和`background_color`分别为网站的题颜色和背景颜色。 3. 将上述两个文件上传到您的网站服务器上,并将路径添加到HTML代码和`manifest.json`文件中的相应位置。 完成上述步骤后,用户在iOSSafari浏览您的网站时,可以通过点击“添加屏幕”按钮将网站添加屏幕上,同时会使用您在`manifest.json`文件中设置的URL地址作为屏幕图标的链接地址。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值