i have a fixed width site, and the client has requested that when it is viewed on a mobile, it should show the whole site by default (ie zoomed out).
In my head i have the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Which is the code that came with the wordpress template im currently using.
Ive looked around various answers on here, and tried various different combinations, however, whichever i use, the site always loads on a mobile with the screen zoomed right in to the top corner (have tested a couple on phones, and a couple with responsinator).
I know im probably being really daft here and missing something really obvious, but if anyone could help itd be hugely appreciated!
If anyone would like to take a look at the site directly, its EdoMidas.com
try this:
Replace 1140 with the width of your website.
Related
I have been looking into this for several months now, and I am finally asking everyone here...Why is this hyperlink not showing my <meta og:image />.
https://www.spragginsdesigns.com
I have messed with this so much I am out of ideas. I've tried many resized images as well. I have tried several file formats and it goes on.
Can someone please let me know what I am wasting my time on and now yours?
Here is the index.html code:
Code is in /src
In the interest of learning how to use Angular, I thought I'd port a half-finished project of mine over from vanilla JavaScript.
The original is here: http://john.bitsurge.net/bikeracks/
The new version is here: http://john.bitsurge.net/bikeracks-angular
angular-leaflet-directive: http://tombatossals.github.io/angular-leaflet-directive/
The first thing I noticed was that the angularized version was significantly more CPU heavy than the original. To see this, zoom way out and then zoom in again quickly. This is problem still manifests, even after removing all $watchs from the markers. ng-stats claims there are only 18 $watchs left, which is certainly acceptable.
The output from batarang suggests to me like things are actually pretty fast, but that contradicts that actual user experience, which is noticeably different between the two. Maybe these batarang times are per-call but there are just hundreds of calls being made?
Batarang Output
The second thing I noticed, while trying to debug the first, is that the angular version doesn't appear to be using any mobile-friendly styling! The buttons are hopelessly tiny and I can't read the attribution at all.
Any idea what's going on here?
Angular looks like the desktop version
The vanilla app uses mobile-friendly sizes
I still have no good answer for the performance issues but the map rendering problems were due to a missing <meta> tag in the <head>.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
..
</head>
solves this one! \o/
I am trying to spin up a web application but Im having a really small problem and Im not sure how to handle it. I have did it before a long time ago but forgot (CLUTZ). When I try to access my application I see the login screen but it looks cached. I see a white page and I can see the links. The layout doesn't load for some reason. Like I said, this is a very small issue that I know someone can assist me with. If you give an answer please explain so that I can learn from it. Thanks a mil!
It sounds like what you're describing is CSS not loading. Doublecheck your <link href="…" rel="stylesheet"/> tags to ensure that they're pointing to the correct files.
well i've made a responsive website which handles well in mobile devices. Now there are some Phonenumbers on the website which my cliënt would like to be clickable on any Phone so the visitor can call directly. I found that making a link of the phonenumbers works like so:
make a call
This triggers mobilephones to call the number. But it also triggers the webbrowser on any other device to follow the link, which results in "page can't be found"
I'm looking for a good anwser to tackle this problem. I've been searching for a while now but i'm getting a bit tired and frustrated.
I think i've come with a solution but i don't excactly know how to put this in the html.
There are several ways to conditional comment browsers in html. If i could do this with the link part and rule it out:
<!--[if any **none mobile** webrowsers: don't read:]>003164646464
And all mobile browsers read the link.
It seems to me, that this is the most easy way to do this, but i could be wrong...
I hope that someone can give me any pointers, I really appreciate your idea's and help!
THANKS!
There is no easy way to achieve this. You can use different approaches depending how accurate you want to be:
WURFL - most accurate, allows to check user-agent and get browser / device capabilities
You can try parsing user-agent by your own detecting OS - check this answer Detecting a mobile browser
Use css media queries to target devices with small screen
Unfortunately there is no silver bullet for this (at least I don't know one).
let's assume I have a so called 2.0 app, compatible from IE6 upwards. The app uses quite complex CSS and is driven by heaps of JS. It works, very well it does.
Now let's assume there is a client who own a strangely coded site, archaic in ways, and forces IE7 emulation through this wonder of a tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Now, he desires to use my app, which is injected in his code using a simple external script call. It works, but not so under the IE7 emulation - obscure bugs from Hell start appearing, not even overflow hidden works properly. By itself the app does work in IE7, but as it turns out, the IE7 emulation is not the same as IE7 and has it's own set of fancy issues.
Turns out the client is unable to strip the emulation meta tag, so I'm left with I don't really know. Does anyone know of ANY WAY I could overpower the rendering mode set in the page header or would there be some other suggestions?
My utmost thanks for anything usable.
Perhaps you could make a wrapper for your app. An iframe that contains an empty page to make the script call. The content of the iframe should not be affected as the meta won't be present in the empty page.