Please excuse my basic knowledge. I built a site and with a responsive template. it worked fine in my proofing are and on all platforms. When i assigned it to the actual domain which is on forward it does not render in the iphone correctly. It ignores the responsive design aspects.
http://www.fransproof.acaesthetics.co.uk/ here it works fine and responds on the iphone.
http://bibbyengineering.co.uk/ here which is where it needs to be it does not work fine on the iphone.
Can any one help me fix it. I have in the head so it's not this issue.... from reading it is something to do with the forward that is set up on bibbyengineering.co.uk
I just havent a clue how to solve it. I cant move the domain we don't own it. Many thanks
Your forwarder domain does not have a viewport meta tag in its <head>. (See, for instance, w3school's viewport page.)
Initial domain has the tag <meta name="viewport" content="width=device-width" /> but it doesn't help when it's inside an iframe.
Try adding something, say, <meta name="viewport" content="width=device-width, initial-scale=1.0">, so that the headin forwarder domain becomes
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
Related
Hi Goodies i have an issue in pyscript
issue : when i paste the below pyscript code in my WordPress post as an html and press preview it just simply popups to dawnload the pyodide file instead of showing the hello world message in the code below. Please someone can clear that to me why this is happening.
thanks regards
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<py-script> print('Now you can!') </py-script>|
</body>
</html>
the output screenshots from the browser where i get this happening.
(1) From WordPress
this is once i write the code in real time wordpress post as an html
this is what i got once i click on preview
(2) Samething is happening in vscode live server instead of the showing the message hello world it just popup my dawnloader idm to dawnload a pyodide file.
this is the code in vscode with the live server
this is what i got once i run with the live server in vscode
i need to run a small python code in my WordPress post when someone visit my website and in that post once he requests some calculation so the python code should be responsible to do some calculations and show that to the user.
any suggestions please
From the logo on the popup messages you're getting in both cases, it looks like this is behavior caused by having [https://www.internetdownloadmanager.com/](Internet Download Manager) (IDM) installed.
When the Pyodide runtime loads, it fetches certain additional files from the web, including pyodide_py.tar (the compressed Python API files the Pyodide Python API, as well as any additional packages specified in <py-config>. If IDM is configured to interrupt fetching these necessary files, Pyodide will fail to load and/or execute.
You may be able to whitelist (allow) IDM to automatically download these files, but that's beyond my knowledge of that particular plugin.
For more discussion, here's a similar issue on the PyScript GitHub.
I've been looking around for a bit but I can't seem to find any information on how to achieve what I want.
Basically I have a page which displays a gif and offers the possibility to share it on facebook. I tried to make this work with the gif file directly but after a lot of trial and a lot of errors I gave up on this idea and instead, decided I might as well make it so the page would appear as a video on facebook since I already have a 15second long video generated from the gif for instagram.
The problem is when I do this I keep ending up with this result
but I'm trying to do an inline video sharing (like youtube does)
I think I need a shockwave player but I have no idea where to begin, my video file being an mp4 and all.
I can't find any information on how to this using heroku + ruby on rails
any links would be appreciated.
here are the metatags I used:
<meta property="og:url" content="url_of_the_page">
<meta property="og:title" content="event_name">
<meta property="og:description" content="event_place_and_time">
<meta property="og:type" content="video.other">
<meta property="og:image" content="secure_url_of_remote_thumbnail">
<meta property="og:video" content="secure_url_of_remote_mp4">
<meta property="og:video:secure_url" content="secure_url_of_remote_mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="960">
<meta property="og:video:height" content="1280">
<meta property="og:site_name" content="site_name">
Thanks for any help
Facebook Open Graph Debugger Tool For The Page
I've had a look at other solutions proposed to other similar questions on StackOverflow and I can't seem to get my favicon to display for my Rails page in Chrome (at least on the desktop, it works for Chrome on my iPad weirdly).
I've tried having it as an .ico, as a .png, and currently have it as a Base64 string as proposed in response to a similar question. All of these work in Firefox, but will not work in Chrome.
The page is deployed using Heroku, and the link href tag is in the head tag.
The page is at https://www.resnate.com.
EDIT: Code:
<head>
<meta property="og:title" content="Resnate: The Music Social Network." />
<meta property="og:description" content="Music, Gigs and Merch." />
<meta property="og:image" content="/assets/previewimg2-c6c3bbb488ce1d2360bb605f93adc8421afe44813c1de1e324aa008858dbba18.png" />
<title>Resnate: Music, Gigs, Merch.</title>
<link rel="stylesheet" media="screen" href="/assets/application.self-a2388fc8a11c59fee992af9cba7099a53de4bd515465610aa19c43a3b90054f6.css?body=1" data-turbolinks-track="true" />
<link href='//fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
<script src="/assets/jquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-d602bdfe68ffc63b9f9cc512872aa3cfff046228a0a36e90dd476e8ef54c1b09.js?body=1" data-turbolinks-track="true"></script>
<script src="https://js.pusher.com/2.2/pusher.min.js"></script>
<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAABYlAAAWJQFJUiTwAAAACXZwQWcAAAAgAAAAIACH+pydAAAC8klEQVRYw+2XsWscRxSHv5nZ273bVRw43BrLcEIGkwgRY8g/YHDhwq3BpcvgwrhyYRUOuFGVMmXAJJCgQn+Cgw3BRpGNweJUyE5njLGk273bvZt5KeZ0J4WTtCffKY1fuey83zfvzbx5TzXv3JPO1lt0GIIAiulaX8MVBdXZ8wSdrbe0N5qoKEK6vSmre1OVAMlzAAIdhqgoQlermHrsI+DcFEIhoDUI2CzDAToMCRCQbg9Tj7n4y89U6nUIDEpNFkBEoGfpfvzIm1u3sbstEAgGG1UQfH0GjKHd3ERp46knE3TEWWqNhtfYrzn4xzlUFNFubvL6xk10NQKlPjsSIgIiuE7OpZXH1OYa/RR7GwLgxZQ26GqErtVwaYbNczgphAg6itBJ7BX0XmqH/oIRq0ApXJpx9sZ1znx/BZumoPSY4g6TJOw8+4sPK6tgNKNSGoxaq5TCFgUzi99Sv3YV6fVQQXCc5EH9/hrX6fD+tz8wcW3kf0d6FWsB2Fr6kWyjiUmSUuI2TYnn57jw8MHAx2F29Lb6Yc82Nmm9+BsVVrCt9NCDKSKYmQQpugzyfEzqSsXVJDEqrPDV4gIzl7/zVUz/B8IJKopoPX/B7to6pn/wjrPSiXVpRrLwDefu/jDyTOx9e/dome0/n5V1Wx5gb5fAyLyKtR7KjVe8xgPoh10Zc/it0OPVjDEv9+TtC8CXQ1gaQCcx6for/ln+6chClK6/Grx+EwOwaYYUXXbX1vn05GmpUmzTbAIA4huHeL4ByJiPUeOAjxMBKGMAmF26f6LneL+PsQBEBB2GtNZeoqvVz2pIWmsv0WHoW7NyAMq3UknMh5VV3v/6+0RaMtduM6rV3wcgiAjiLK7jhwaMLv2sHs4guHYb18kRZ/uRGEZjCKA1kufUGg0urTyeWlvur/AwncFAQ6C3vUOlXqc215jaYNLb3mG/ZoDys5rNMt7cun1qo5mqBH4wcUWB5DkO/Lh0CrY3nLqiIKjOngf438bzfwFHKVzQwuVyewAAAFl6VFh0U29mdHdhcmUAAHja88xNTE/1TUzPTM5WMNMz0rNQMDDVNzDXNzRSCDQ0U0jLzEm10i8tLtIvzkgsStX3RCjXNdMz0rPQT8lP1s/MS0mt0Msoyc0BAK1OGKx0FS5rAAAAIXpUWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzAAB42jMEAAAyADIMEuKEAAAAInpUWHRUaHVtYjo6SW1hZ2U6OmhlaWdodAAAeNozNLIwAgACAADOvq1X/gAAACF6VFh0VGh1bWI6OkltYWdlOjpXaWR0aAAAeNozNLIwAQACAgDQ2j98IAAAACJ6VFh0VGh1bWI6Ok1pbWV0eXBlAAB42svMTUxP1S/ISwcAEXsDeF85R+IAAAAgelRYdFRodW1iOjpNVGltZQAAeNozNLY0NjcyNTI3BAALOQIJ9tf2MgAAABl6VFh0VGh1bWI6OlNpemUAAHjaM7LMTgIAAq8BOcs8cVIAAAAcelRYdFRodW1iOjpVUkkAAHjaS8vMSbXS19cHAAyaAmiUQFGqAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="nM46FYSVzSqJFGHsAMGU/IrPXSNExiq25L5Q7vJp2ZP+f3uj1u9isqrpgNna/mAl1X0eABdwsP6YYt8qzgDHTA==" />
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
I know this question is two years old now, but as I have been struggling with this exact problem for 3+ hours surfing the net without finding a solution to my case (I was doing everything people suggested in all its flavors) and I have just suddenly make it work, I think I'm going to post my experience just in case I can save the pain to the next victim.
My setup was exactly the same as OP's: Rails app with a favicon displaying in every single browser but Chrome. I tried to follow #toddmetheny answer without success.
It turns out that as this app I'm working in loads a whole lot of scripts inside <head>, where you place the favicon <link> tags becomes important. I don't really know why this happens (would be much appreciated if someone could either confirm or destroy my theory), but I guess that while Chrome is loading those scripts, as it has not yet found any <link> tag referencing a favicon, it requests the default /favicon.ico. I noticed this while looking at the Network tab: Chrome always requested /favicon.ico while the other browsers requested the one referenced in the <link> tag as expected.
I don't know if this might have been the cause to OP's problem (as I see he loads some scripts too), but the solution was as simple as moving the favicon_link_tag block to the top of <head>, just after <meta> tags.
Hope this helps some desperate folks out there!
Try using the rails helper favicon_link_tag.
Make sure your icon is saved in app/assets/images. Clear your browser cache to ensure you're using the latest.
I have a very simple HTML5 iPhone web application that works almost perfectly; there is only one issue: between the launch image and the app homescreen, a completely white screen appears (i.e. flickers) for about one second.
I'm downloading the app to my phone from the web by using the "Add to Home Screen" button. The javascript file (functions.js) and stylesheet are both very small files.
Has anyone had this problem? Are there any ways to work around/fix it?
index.html
<!doctype html>
<html manifest="demo.manifest">
<head>
<meta charset="UTF-8">
<title>HTML5 Application</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="apple-touch-icon-precomposed" href="Icon#2x.png" />
<link rel="apple-touch-startup-image" href="Default#2x.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="wrapper">...</div>
</body>
<script type="text/javascript" src="function.js"></script>
</html>
demo.manifest
CACHE MANIFEST
index.html
Default#2x.png
functions.js
style.css
.htaccess
AddType text/cache-manifest .manifest
EDIT #1: I have done some more research and came upon this answer:
Clearing the screen and other artifacts while rendering is a common issue of HTML rendering due to the progressive nature of HTML. The concept is that the browser should draw as early and often as possible and render styles/scripts/content as they become available. It's possible the markup has an issue where all rendering is delayed until some content or a script is available.This could happen if:
You have dynamic heights based on image dimensions but you haven't
set the image dimensions in the markup or CSS.
Your layout is based on tables and you aren't using 'table-layout:fixed` in CSS.
Your HTML uses inline scripts with document.write().
You have some kind of onLoad() function that reveals/modifies content.
You link to an external stylesheet.
You're using uncacheable external content or you've disabled caching.
You're using external content that's returning 404 or isn't available offline.
I have followed all the suggestions in this answer, but it does not rid my web app of the white flicker. Are there any hacks to get around this issue?
EDIT #2: I have tried using no Javascript and a stylesheet with only:
body { background-color: black }
But there is still a white flicker. Since this appears to be an issue with all web applications like this, my question is: Are there any hacks to work around this issue?
CSS selectors are pretty slow on iOS (greedy CSS reset scripts have terrible performance too).
Head initiated javascript self loading DOM-ready scripts and CSS selectors running together compound the issue further. As you have both CSS and javascript requests in the head, there is a small but appreciable delay processing the body, especially the body's background colour.
Most HTML5 frameworks are moving to deferred script loading. As a minmum you want to get the stylesheet loaded first and worry about javascript second. Try putting the css at the top and scripts at the bottom, then inlining a default background colour (not image - there's an appreciable delay on iOS 5 rendering scaled background images and CSS gradients).
You can also try the async attribute on iOS5+, but I haven't tried it myself.
Hope this helps :)
Alright, seems like a basic and annoying problem. I think the best way to tackle this would be via AJAX (Asynchronous JavaScript and XML). I'm sure you probably already know what this is, but it's just a way to basically send a request from JavaScript for a file elsewhere and then load it into the page or parse it however you wish.
A little more advanced approach
For your example, I recommend you comment out the line of CSS that has the background-image like this:
.bg-container {
/* background-image: url(img/bg.png); /* commented out */
}
Note that the second comment just makes it easier to comment and uncomment the one line while debugging your code.
Now just add a simple img tag to your body, and make the src of it an ajax loader (you can find the spinning wheel generators anywhere). From here you can write some JavaScript to load the image, get rid of the spinner, and replace it.
Two simpler approaches
This solution doesn't appeal to me, I don't think most people would like it anyways. That's why I use 'Bootloader.js' which is a little AJAX loading tool I wrote a couple of months ago to help people with these sort of problems.
It's easy to use, aside from the script include, just add this meta tag:
<meta name="bootloader" content="enabled,forms('selectorOfForms'),a('selectorOfAnchors')">
The forms and anchors is optional, if you use it, it will make all your forms and links asynchronous (not for cross-domain use yet). The forms are not easy to setup, you can read the documentation on that if you would like.
Finally, set up your body like this:
<body>
<div id="body">
<!-- All the content should go here -->
</div>
<!-- This will disappear on first ajax load -->
</body>
And there you have it, this will handle everything for you.
Final suggestion
If you don't like any of these options, or want a limited yet customizable option, I recommend you use Image LazyLoader by Mika Tuupola (included with Bootloader.js) and also available at: http://www.appelsiini.net/projects/lazyload
Tell me how it goes, and what you use! XD
This problem occurs with even simple sites.
Take this for example: it shows a website with a background of #ccc with a splashscreen of #ccc for the iphone 7.
<!doctype html>
<html style="background-color: #ccc;">
<head>
<title>iOS web app</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="iOS web app">
<meta name="viewport" content="initial-scale=1">
<link href="https://placehold.it/750x1294" media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body style="background-color: #ccc;">
<h1>iOS web app</h1>
</body>
</html>
https://imgur.com/a/tGiREVM
You can see a white flicker while the app loads.
Faster loading apps feel worse, slightly epileptic, with the white flash. And if the splash screen is dark, it looks worse again.
I'm at the very early stages of writing a BlackBerry app using WebWorks. I'm aiming at mainly OS6 devices (Torch), but I need it to be compatible with OS5 for a small number of users who'll be using older devices. As far as I'm aware, WebWorks should work on OS5, however I have created a basic app with a hyperlink, and the text doesn't show on the OS5 simulator (it works fine on the OS6 simulator). All it shows is a blank screen. I've tried to just put some text on the app (i.e. not in hyperlink tags) and this doesn't show either.
HTML file as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta name="viewport" id="viewport" content="height=device-height,width=device-width,user-scalable=no" />
<title>My App</title>
<script type="text/javascript" language="jscript" src="http://localhost/PubInfo/scripts.js" />
</head>
<body>
Click to show device model.
</body>
</html>
You'll notice the only unusual thing I've done (and this is reflected in the config.xml to load the index.htm) is to reference the script file from localhost so I can amend the app without recompiling, again this works fine in OS6 so I don't think it's this that is causing the problem.
I'm developing using the WebWorks Plugin for Visual Studio on Windows 7 (x64). Apart from referencing the files from localhost, everything else is default, i.e. as it is set up when you create a new project.
Has anybody come across a similar problem, and if so what was your workaround? Any help would be appreciated.
Its because your script is not well written (completed):
Also update your meta tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My App</title>
<script type="text/javascript" language="jscript"
src="http://localhost/PubInfo/scripts.js"></script>
</head>
<body>
Click to show device model.
</body>
</html>