WYSWYG HTML rendering of iOS/Android devices displayed on Mac OSX application or iOS app (scaled)

Question

Created Feb ’22

Replies 4

Boosts 0

Views 1.1k

Participants 2

I would like to know if there are some well-known web technologies on Mac OSX applications or iOS apps that allow an application to show and demonstrate a real HTML rendering WYSWYG for different iOS devices, dimensions, resolution, dpi, retina, viewport meta tags and so on.

It is like the iOS simulator, but I see that on that special piece of software the WKWebView is not reliable as it comes to these features, and it is a development tool.

It is important that dpi, retina, viewport and so on are considered to create such an application that is WYSWYG, also if in a scaled form, or exploting the Safari browser. I think that web developers already face this issue, so I think that the related technologies have been already developed and are available.

But I am no expert so where could I search for them? I mean, some platform or example application, or similar tools.

The goal is creating an application that can show the result of HTML rendering inside windows (similar to the iOS simulator) that can be proportioned to real devices and allow choosing the device form factor and screen, also in scaled form, but depicting the exact HTMl rendering that will happen on the real iOS devices, but possibly also Android devices.

Thanks in advance

Boost

Answer 1

robnotyou OP

Feb ’22

WKWebView is not reliable as it comes to these features, and it is a development tool

Where are you getting this information from?

WKWebView is the standard way of displaying HTML content in an iOS or macOS app.

"A WKWebView object is a platform-native view that you use to incorporate web content seamlessly into your app’s UI."
See https://developer.apple.com/documentation/webkit/wkwebview

0

Answer 2

am74 OP

Feb ’22

@robnotyou

Sorry for the misunderstanding, I just was saying that the iOS simulator WKWebView is not displaying the HTML as it was on a real device. Also, in fact, I am interested in having the rendering results of the WKWebView itself on those real iOS devices, inside a OSX or iOS app on a certain device, in reduced scale to give an idea of what is the real outcome.

0

Answer 3

robnotyou OP

Feb ’22

Okay... I'm not sure what you are asking now.

An iOS or macOS ("OSX" is long gone) can use a WKWebView to display web content.
This will work on a Simulator, or a real device.

The WKWebView can be adjusted, using it's contentMode property (e.g. "scaleToFill")...
...or you can inject some javascript, to customise the HTML content in other ways (I don't do this, but a quick Internet search will return various code snippets).

Have you tried this?

If no, that would be your first step.
If yes, what don't you like about it, and what do you want to do differently?

0

Answer 4

am74 OP

Feb ’22

@robnotyou Thanks

Maybe I am wrong, but I experienced that the WKWebView is not working the same way on the various simulator iOS devices, at least in the default mode, that is without meta tags injection, so you seem to be sure that with the appropriate meta tag injection it works well on each simulated model.

The meta tag injection is necessary also on real devices, so the default WKWebView is tricking,if you do not know that. Default rendering is different from, let's say, the Android WebView.

I did not know that and I had to add the injection code during the review process for the submission to the AppStore. It was just matter of creating a new build in fact.

But I think that the WKWebView on the simulator could have also further differences and quirkness depending on the particular simulated device.

However the simulator is secondary problem here.

I think that the answer to my question is "Yes it is possible to have a scaled representation of the real HTML rendering on a physical iOS device (in a sort of frame corresponding to the device itself) in a MacOS or iOS app because the WKWebView is able to do so with suitable meta tags", provided I have a list of the suitable values for those settings.

Am I wrong?

But I further wonder whether those values are easily calculated, or they are already known because they are available in resources like tables of values, ready-made tools, and so on, if they really exist for every device.

0