safari web inspector preview not accurate - safari-web-inspector

I am trying to make a simple web site look ok on iphone 6 ... when I preview it in Safari web inspector it looks fine:
Preview of site for iphone 6 in Safari web inspector
However, when I actually open the live site on my iphone, it looks like this:
actual site on iphone 6
If I have to, I can keep (blindly) tweaking it and uploading the new css file to the web, and checking it until I fix the spacing problem, but does anyone know why the preview isn't accurate?

Related

My site does not load on new Safari version 15

My ruby on rails website does not load on safari 15. It works fine on older versions as well as other browsers. The below is what I see in Safari 15
There is nothing in the console logs or any indication of what the "problem" is. Interestingly this is also an issue for my site if I run it locally on localhost:3000 which leads me to think it's an issue with something in my sites code.
If I disable Javascript the site will then load, what in my Javascript could cause this?
I have a similiar problem with my matured React app. Some users of my web application are using Safari 15 and they report that some fragments of the application are not loaded.
I also got screenshots from them. There is nothing indicated in the console.
But interesstingly all the HTML canvas elements are not rendered. Even the small ones.
Some examples:
Leaflet map in canvas (map tiles somehow not rendered):
A chart in a canvas (chart stays blank):
I mean it is working in every other browser since years and also Safari 14 and Safari on iOs.
Must be something Safari 15 realted.
For me this ended up being an issue with Three.js, I needed to upgrade it's version then the site worked in safari. If you're not using Three.js, then I'd recommend checking the other JavaScript packages you are using.

App has dynamic JS files, unable to debug in Safari Remote Web Inspector

I have a sapui5 app that I'm trying to test on mobile Safari using remote web inspector. Since it loads javascript files dynamically (uses MVC), it only lists these files under XHR. Apparently, because it's XHR, I can't add a breakpoint to these files.
Is there any way for me to debug this? Or force web inspector to load these files some place else? It seems a bit useless otherwise.
I have the latest version of iOS and Safari on my iPad.
I know this question has been asked previously but nobody answered it. So I'm hoping this one will gain a bit more traction.
Thanks!

Cannot view video from publisher using Chrome to iPad with OpenTok

I'm currently trying to set up a connection between my web client and my iOS app, but for some reason my iOS client only sees a black box when using Chrome (version 33). I can see the video just fine if I use Firefox (both in my app and when I put the browsers side-by-side, they can see each other).
This doesn't appear to be a documented known issue with the JavaScript SDK, and I can't see any recent discussion about this on the forums (last post was mine).
The iOS sample can be located here (samples/OpenTokHelloWorld) with the browser page in samples/OpenTokHelloWorld/browser_demo.html
I suggest cd'ing into samples/OpenTokHelloWorld and running python -m SimpleHTTPServer, as it can't be run from a file:/// path.
Here is what my iPad sees:
Chrome:
Firefox:
And Chrome/Firefox (respectively), both publishing video from the same camera
Edit: after testing on other machines, it may be something specific to my environment even though none of my extensions run in Incognito and I don't have any custom plugins installed.
It looks like the OpenTok mobile SDKs with the specific webcam I was using has issues. On Android the video stream will display for a brief moment then segfault, and on iOS there will be no video at all.
I have tested this many times and could not reproduce what you are seeing in your chrome.
Without seeing any console errors or iOS logs the best suggestion is to try clearing your cache, or maybe restarting your computer (longshot)

Video not working in IE 10 without compatibility view enabled

i am trying to embed a video on a web page using video.js.
The video should play on mayor browsers. On Chrome and Firefox it is working fine, but i can not make it work in IE 10 on my local machine (Server 2008 R2). My html code is 100% of the supplied demo.html which is also not working on IE 10. I used absolute urls for video source and added mime types for video formats and additional files in IIS. When i use the compatibility view button, the movie works.
The following error code is displayed in the IE 10 console.
Video Error,[object Object]
The video is also working fine when i use another computer (windows 7, with IE 10, and without compatibility view) to surf to my dev machine, so i assume i have a local problem.
How can i debug this?

Sencha Touch work flow

I have started working in Sencha Touch 2.1.1. I would like to know the following:
What is the best work flow for a Sencha Touch app during development? Testing in Chrome may not give the actual mobile view. How can I test my app on Windows during development?
xtype 'label' is not getting resized when I change the browser size.
After changing the code each time I come to Chrome and refresh, but it takes a few seconds to load the app. Is there any quicker way?
Host you app using WAMP or some we server and open it on you mobile
device is you are using same WiFi.
please attach screen shots
Its not an Egyptian magic, it will take few seconds pal...