I've developed a mobile website based on jQuery Mobile. Everything works on my own Windows Mobile device with Opera Mobile 10, but a customer of mine always sees the page magnified.
I thought that he might have a zoom setting >100% in Opera Mobile, but he claims that this is definitely not the case.
The same problem also occurs on the jQuery Mobile test site ( http://jquerymobile.com/test/ ) . Here's a screenshot of the site as displayed on my customer's device:
Any idea what might be going wrong here? I was unable to reproduce this problem on my own device or in an emulator.
My customer's device is a HTC HD2 runing Windows Mobile 6.5 and Opera 10.
Thanks,
Adrian
I'll just paste the answer by David Storey which was made for this on Opera Dev forums. It is not specifically about the 100% issue, but there might be similar issues related to the viewport tag issue, for people getting across it.
Opera Mobile assumes that any document
with a mobile specific doctype, such
as XHTML Mobile Profile or XHTML Basic
are designed and optimised for mobile,
while documents with a regular doctype
are not optimised for mobile
generally. Thus if there is a desktop
doctype the overview mode is enabled,
which you can control with the
viewport meta element. If there is a
mobile doctype the overview mode is
disabled and a regular 1:1 viewport is
used.
There were some bugs in the viewport
meta element support in Opera Mobile.
They should be fixed in the latest
version.
Did you try adjusting the scale?
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
You should use xhtml mobile doctype
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
Try adding <meta name="viewport" content="width=device-width">. Opera seems to behave better when it's there.
If that doesn't work, please file a bug report https://bugs.opera.com/wizard/.
Related
I'm using the following classes to fix a header: navbar navbar-default navbar-fixed-top
This works perfectly on my PC:
But when checking it on iPhone or iPad, the header is only partially shown:
I'm using Bootstrap v3.3.6. Has anybody had this problem and were you able to fix it?
Have you tried resizing the browser on the pc to see where it goes wrong. If the layout is different there then on mobile you might need to add a meta tag.
Try adding this into your header:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
I tried this using browserstack and it looks fine to me. Maybe it's a particular version of Safari Mobile browser not working or something cached on your phone?
Jwplayer does not work on Safari (player version 7.2.2 with updated flash in browser - tested on windows 8.1 & 10). This is the case even on their own web site (https://dashboard.jwplayer.com/#/players/basic_setup
you have to be logged in to access page).
The error message is Failed to setup Flash JSON.
stringify cannot serialize cyclic structures.
Can someone who has an upgraded account request support from jwplayer?
They do not accept questions from non-paying accounts. Do they intend to correct this? Why does Safari setup flash and not use html5?
any help would be appreciated.
It could be any number of things going wrong, and it's always best to provide a fiddle to allow for a quick diagnosid. Let's help you get squared away with the new JW Player 7. You can instantiate the player using the html5 player in this fashion, but JW Player does now use the HTML5 player by default in version 7.
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="YOURJWKEY"</script>
<div id="thePlayer"></div>
<script type="text/javascript">
jwplayer("thePlayer").setup({
file: "file.mp4",
width:640,
height:360,
primary: "html5"
});
</script>
Hope this helps.
This is a bug which was introduced with JW 7.2.0 and has been fixed in JW 7.2.4 (currently in beta).
I'm using phantomjs version 1.9.7 which I believe is supposed to support web fonts. I have inserted the font with google web fonts however it is just displaying my fallback font when I automate a screengrab. The webfont is displaying fine in all my browsers. Are there any workarounds for this?
I have struggled with this issue for several hours. Well, there is a simple reason for this controversy: user-agent!
Some services such as Google Fonts are returning different CSS content based on user-agent. When you call a webpage which includes Google Fonts with default PhantomJs user-agent, Google would return TTF version which is supported in PhantomJs.
However, if you set a custom user agent (Chrome, FF, etc.), Google Fonts would return .woff2 version. .woff2 is not supported in PhantomJs 2.x. Obviously, fonts are not going to be loaded.
So, for users who are testing PhantomJs without setting a generic user-agent, Google Fonts is working. If they set for example Google Chrome user-agent, it does not work.
So, you have two options:
Avoid setting a custom user-agent if it is possible.
Avoid using dumb-smart font providers like Google Fonts which does not outputting all font versions in CSS and let the browser decide what it needs.
I believe your belief is wrong :-)
The 1.9.x series of Phantom is still based on the old WebKit code, which people have been reporting web font problems with all along.
The good news is that a technical preview of Phantom 2.0 is apparently about to be released; https://github.com/ariya/phantomjs/wiki/PhantomJS-2 is intended to be the best place to follow status. And, from memory, someone reported success with web fonts using it (but I may be wrong on that as a quick search of the mailing list archives didn't turn up a definitive message saying web fonts work... but they definitely should).
BTW, SlimerJS is an almost drop-in replacement, based on Firefox's Gecko engine, and does support web fonts (though some problems in corner cases, IIRC).
I just had the same issue with PhantomJS 2.1.1.
In my case I was working under a proxy that was blocking PhantomJS from loading the font from Google. After connecting to an open network it rendered correctly.
I tried all fixes listed here to no avail, but here is a work around. Either option resolved this for me.
First Option:
Install the missing web fonts on the local computer that is running PhantomJS. Most web font providers including Google allow you to easily download the fonts for local install. No change needed at the target URL.
Second:
I sites I have control over, I was able to resolve by splitting up the link tags.
Change This from:
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
To:
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
I know this is not an ideal solution but either one works, It depends on if you can modify the target URL.
I would like to prepare my site for windows 8 pinning and have been reading some documentation on how to add the various images and could figure out that it could be done by using metadata and according to instructions and help on this site I could actually build the following meta tags but i couldn't figure out where I can call the browserdetect.xml file assuming I have the file located at mysitee.com/upload/win8/browserdetetct.xml and the images in the same folder
<meta name="application-name" content="MySite"/>
<meta name="msapplication-TileColor" content="#2d90c6"/>
<meta name="msapplication-TileColor" content="#2d90c6"/>
<meta name="msapplication-square70x70logo" content="http://placehold.it/70x70/000000/ffffff&text=MySite"/>
<meta name="msapplication-square150x150logo" content="http://placehold.it/150x150/000000/ffffff&text=MySite"/>
<meta name="msapplication-wide310x150logo" content="http://placehold.it/310x150/000000/ffffff&text=MySite"/>
<meta name="msapplication-square310x310logo" content="http://placehold.it/310x310/000000/ffffff&text=MySite"/>
Any help please ?
Update: Microsoft Edge on Windows 10 and Windows 10 Mobile now only uses /browserconfig.xml, so stop including meta tags.
I see that Microsoft has — a bit prematurley — updated their wizard to Windows 8.1. Which is not backwards compatible with Windows 8.
What you need (in addition to my comments in the other post) is the older code with a 144x144 px image:
<meta name="msapplication-TileImage" content="/tileimage-144.png" />
That will work in Internet Explorer 10 on Windows 8 in conjunction with the two backwards compatible tags you already have:
<meta name="application-name" content="MySite" />
<meta name="msapplication-TileColor" content="#2d90c6" />
Note that you should not use application-name unless your site is actually a web application. (Per the HTML5 specs.)
You can test the Windows 8.1 (Internet Explore 11, actually) stuff in a virtual machine. Microsoft is handing them out for free over at http://www.modern.ie/en-US/virtualization-tools#downloads
Further enhancements: Internet Explore 11 does not actually need the tags to be present in the document. so you can save users who do not intend to pin your site the bandwidth (thus gaining performance) by including a browserconfig.xml in your root (eg. example.com/browserconfig.xml). IE 11 will read this file when a user tries to pin a site and load the resources needed from there instead of from the meta tags. So what you do is include the two/three tags IE 10 needs, and put the new IE 11 tags in your browser config file. Read up on http://msdn.microsoft.com/en-us/library/ie/hh772707%28v=vs.85%29.aspx (ignore the bits where it tells you to include a meta tag to load the config file. As long as the file name is browserconfig.xml and it is on your root, it will automagically work.)
Making it all darn perfect: Windows 8 requires no padding in their image, only a transparent background. Windows 8.1, however, expect ⅕ of the tile images to be left transparent for padding. You will stick out like a sore thumb amongst the other applications if you do not pay attention to the padding.
Live example: I implemented this on my own site over at Slight Future if you want an working (as of the Windows 8.1 Preview 1) example.
Final thoughts: Why Microsoft have to introduce something new for every single version of Internet Explorer / Windows, I can’t understand. Nothing is backwards compatible. For IE 9 / 10 and pinned sites on the Windows 7 / 8 desktop taskbar, you need a favicon in four different sizes.
You can follow the step-by-step tutorial / wizard at http://www.buildmypinnedsite.com
This is my html file, it can play at Safari 5.0.5 (Mac OS X 10.6.8), but when I update the Safari to version 5.1, it can NOT play, can anyone tell me why, and how to solve it in Safari 5.1? Thanks.
<html>
<head>
<title>HTTP Live Streaming</title>
</head>
<body>
<video controls src="http://mysite/index.m3u8">
</video>
</body>
</html>
Updated: I found the solution! When I set in the System Preference > Network > Advanced > proxies > Automatic Proxy Configuration with the proxy I use, I found the HTTP Live Streaming can NOT play, when I remove proxy, it can play now! How does this happen? Why it play well in Safari 5.0.5?
In Safari 5.1, open the Activity window with the Window->Activity menu. That will show you all the URLs it attempts to download as well as whether it downloads successfully. Maybe this will give you a clue.
Also look at the system console by running the Console app that you will find in /Applications/Utilities.
Try it in FireFox, Chrome, and on Windows, Internet Explorer and Safari for Windows.
If all those other browsers play your video OK, and neither the Activity window nor the console yield any insight, file a bug report. The chances are pretty good that, if it is a bug, Apple will fix it in the next release, or if it is not a Safari bug, an Apple engineer will give you a clue as to what you did wrong.