I have a jQuery mobile website built and working. However I need customers to have a live preview of the mobile website so I have built a page which has a div, image of phone inside the div and then an iframe is positioned nicely within the div. The mobile site looks fine scaling wise on a smartphone and not too bad on a normal desktop pc I have the following meta tag set:
<meta name="viewport" content="width=device-width, initial-scale=1">
However when viewing the mobile site via the iframe its scalled too big, does anyone know of a good way to resolve this or is it not possible?
Related
Website link: https://www.ymgrad.com
The website is behaving a bit weird on iPhones. Please note: This behavior is not showing on Androids, but only on iPhones. The issue persists amongst all browsers - tested on Chrome, Safari, Opera Mini on two different iPhone X phones.
What's the issue?
When I open up the website, by default the browsers try to open the mobile version loads. However, to my surprise, this looks like the desktop version instead. What's even more surprising is that if I request the Desktop version of the website, the mobile version shows up instead (which should have shown by default anyway).
I've been dealing with this for a couple of months now, and I am finally posting this here.
Images which show what I'm talking about:
Default Loaded website version is desktop version even though the phone thinks it is mobile version.
When requested desktop version, the browser shows mobile version.
Seems like you need to specify the correct meta viewport values.
Your initial HTML has a correct meta viewport value:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
But, it seems like something is changing the value of it to:
<meta name="viewport" content="width=1024">
Which causes the width of the web site to be always 1024.
Without having access to your source code, it's hard to identify the specific cause of this. My suggestion is to try finding which code of yours is changing the value of your meta viewport tag to width=1024.
I'm trying to use OpenLayers in a TWebBrowser in Delphi.
When I open a simple example from their site using OpenLayers v4.3.1, I don't seem to be able to pan the map.
WebBrowser1.Navigate( 'http://openlayers.org/en/latest/examples/simple.html' );
I've set the embedded webbrowser mode by using code found in another post. setEmbeddedWebbrowserMode( iemIE10 );
OpenLayers v3.4 seems to work, however. I'm able to use the following fine:
WebBrowser1.Navigate( 'http://www.acuriousanimal.com/thebookofopenlayers3/chapter01_01_basic_map.html' );
I'd like to be able to use the most recent API if possible. Any idea why the new one isn't working in TWebBrowser?
The problem with the examples is that they contain document mode meta tag for the EdgeHTML mode:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
and they do not work properly with IE11 web browser control (we faced a few problems with mouse input as well). Advice here is simple, serve a proven copy of OpenLayers library to your clients and before they get full compatibility with IE11, try to use IE10 mode in your web application:
<meta http-equiv="X-UA-Compatible" content="IE=10">
or use another embedded web browser control (e.g. CEF based).
I am experiencing problem with scc style do not apply when I adding my web app to a home screen of iphone and lunching app with shortcut(icon). So here is two examples. First open with safari.
here is the screenshot of same web opened with icon in iphone menu
So for some reason the css style do not apply for Melanie Wright on the second image and also icons for input fields still white not orange, if I open this web app with shortcut(icon).
here is my meta tags that I used to mimic the look like it is app
<!-- Iphone Icon -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Thank you for you time !
Browsers tend to cache css and script resources for a period of time.
Try clearing out the cache on the device or even manually force it to load a new file. Its a good way to know that you are not using a cache version of the css file.
Just add ?v=1 to the end of your file.
script.js?v=1
My senior project is a web-based storytelling app to be viewed on iPad. The elements need to be touched with.
I was wondering if there was some sort of packaging service that will convert my pages into an independent app - I want to escape some of the features of Safari. Such as the address bar, tab bar, etc. I do not want people to be able to leave my project in the gallery.
Any ideas?
if you add this to your header:
<meta name="apple-mobile-web-app-capable" content="yes" />
you can then add to homepage and it'll remove the browser elements...but you will have to make the various page calls with ajax, or setting window.location...you can't just have traditional links (it'll reopen safari)
----------------------------edit:-------------------------------
Here's what I mean about window.location.
used to be linktext
now
<span style="text-decorate:underline;color:#00F;" onclick="viewPage('http://url');">linktext</span>
<script type="text/javascript">
function viewPage(p){
window.location=p;
}
</script>
I'm building a mobile oriented web site.
New phones most of all use new browsers which support html5 and css3. Very often they have touch screens. Probably owner of iPhone4 or Galaxy does not bother about page size so much - so it IMHO it is a good idea to use jQueryMobile for such user.
On the other hand there are smartphones which are also have touch screens but screen resolution is too small (i.e. 240x320) to use jQueryMobile.
There are also a number of phones which do not have touch screens and also there are number of users who switch off Javascript to do not load js files and save their money.
I tried to use Modernizr to determine if mobile phone supports touchscreen but unfortunately Modernizr.touch only shows if a browser support it.
It is known to use CSS Media Query Modernizr.mq() to determine the screen size and load different css files base on it but this solution doesn't solve problem with switched off javascript and old browsers like IE8.
There is also a good article http://www.alistapart.com/articles/return-of-the-mobile-stylesheet but unfortunately it has basically ideas not implementation.
Question: I'd like to load jQuery mobile for smartphones with min-width 480px. Otherwise load default css. It is possible to implement this for as many as possible mobile browsers?
Answer (result code):
<html class="defcss">
<head>
<link href="/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content( "~/Scripts/yepnope.js" )"></script>
<script type="text/javascript">
//<![CDATA[
if (window.screen.availWidth > 450) {
document.documentElement.className = document.documentElement.className.replace(/\bdefcss\b/, '');
yepnope(['//code.jquery.com/jquery-1.6.4.min.js',
'//code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js',
'//code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css']);
}
//]]>
</script>
I would look into something server side and generate the files needed, Take a look at:
http://code.google.com/p/mobileesp/
http://blog.mobileesp.com/
http://wurfl.sourceforge.net/
http://www.handsetdetection.com/
There are some client side scripts but I haven't used any of them yet:
https://github.com/sebarmeli/JS-Redirection-Mobile-Site
https://github.com/miohtama/detectmobile.js
Related:
Mobile detection
Also what about Tablets?