I know it's not the first question on this topic, but I can't find any helpful solution on the web and my dev friends can't help me either.
I wrote a website (HTML, CSS) and it's responsive. But when I open the site on an Android phone, the keyboard messes up my CSS layout.
I used media queries, and didn't use much JS for the styling. I tried to use JS and I changed the viewport meta tag but it didn't help.
This is what it looks like in Chrome's Dev Mode
Related
Making a document for the designers that displays the desktop and mobile examples of each visual component in a style library. Client wants to see the examples of each on the page at the same time.
Currently doing this by putting it in an iframe, similar to here. Unfortunately the iframe solution is causing odd complications and side-effects.
I was wondering if theres a better/simpler way I can tell the container of the mobile example to use the mobile breakpoint media queries?
I'm building a Windows Phone 8 HTML5 app that shows an external website on the web. When the page loads, it shows all the content along with the correct css styling except for the web font. The web font is not included in the project, it is run from the website online. Also, I know javascript is running because other javascripts are working on the page. Does anyone know a solution to get web fonts working inside apps? If it helps, when I direct the main web browser in Windows Phone 8 to the webpage in question, the webfonts load fine.
Custom fonts can be used in Windows Phone 8 HTML5 apps in the same way as they are used on websites and other mobile platforms' webviews. There are two things to watch out for,
Within Visual Studio make sure that the font's Properties>Advanced>Build Action is set to "Content" so it is copied to the device when the project is built and deployed.
Make sure that the font you are using is licensed for embedding and that the embeddable flag in the truetype font is set to 0 to allow embedding. iOS and Android ignore this embeddable tag but IE10 respects it.
You can inspect the embeddable flag of any truetype font using the open-source TTFEdit. You can make a font embeddable by changing the value in View>Show>Advanced>Legal rights for embedding to 0 and re-saving it. Only change the flag if the font is licensed for embedding.
I've tested with a number of truetype fonts with no problem. My only issue so far has been when including the font-awesome library where the src: values in font-awesome.min.css needed changing to fix a bug in IE10 mobile. When using font-awesome,
src:url('../fonts/fontawesome-webfont.ttf?v=4.0.3') won't work. src:url('../fonts/fontawesome-webfont.ttf') will.
http://developer.android.com/design/building-blocks/tabs.html#scrollable
Has anyone achieved this effect in a web app using JavaScript (or even jQuery)?
Got the pages sliding nicely (obviously that's the easy part), but getting the page titles to animate correctly looks like it could be painful!
May just go with the fixed tab layout but if anyone has any tips or examples, I would be very grateful...
There's a CSS which makes your page look like Android:
https://github.com/proimage/Android-4-ICS-CSS
There's a more advanced project with some JS:
http://jaunesarmiento.me/fries/index.html
And this is the way to do page swiping:
http://stereobit.github.io/dragend/ (also works on the PC)
http://swipejs.com/ (only works on touch device)
http://eightmedia.github.io/hammer.js/ (only triggers the event, doen't swipe the page)
With these you can have multiple pages in one HTML file:
http://handlebarsjs.com/
https://github.com/janl/mustache.js
http://underscorejs.org/
http://embeddedjs.com/
http://jade-lang.com/
https://github.com/blueimp/JavaScript-Templates
I'm working myself to combine some of these libs into a usable application. Hope it helps. This is also a note to myself.
So I'm trying to build a mobile and desktop version of a website simultaneously (using a MediaWiki engine, if anybody is interested). Since I don't have much experience with mobile device building, I was looking around for some good mobile development practices. In the end, I feel media queries are good for what I need to do, mostly because double-publishing on separate domains (like m.foo.com vs foo.com) is not possible for this task.
The shortcoming to CSS media queries, it seems, is the apparent inability for phone users to view the site in desktop format whenever they want to (Google or YouTube is a good example of this when accessed using a phone).
Is there any way for me to freely toggle between desktop and mobile stylesheets developed with media queries? Would using javascript be too bulky for a mobile device to download?
I appreciate any suggestions. Thanks!
EDIT: For clarification, yes, I want to click a link or button on the mobile style to switch to a desktop style.
I'm 90% sure that it is not possible with CSS alone but can easily be accomplished with PHP or Javascript. It shouldn't be too bulky to use javascript.
Some examples
PHP Style Switcher.
Javascript Style Switcher
Jquery Style Switcher
I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)