w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories
Bootstrap iPhone 5 Landscape Orientation Media Query Not Working
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) from: http://cssmediaqueries.com/target/

Categories : Twitter

Font-size Quirk when Landscape rotates to Portrait - CSS Media Query - iPhone5 Safari
Well since it helped, this would prevent Safari from auto adjusting font size on rotation: html { -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */ } Credits

Categories : Iphone

CSS3 Media Queries for targeting landscape on both iphone 4 and iPhone 5 sized sceens
Yeah, you can target landscape on both using: // Iphone 5 @media screen and (orientation:landscape) { .test { width: 50% } } // Iphone 4 and below, from @Danield's example @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) { .test { width: 30% } } Where the first is for iPhone 5, and the second is for iPhone 4 and below. Although, I think the second one should work for both in itself. But I can't confirm it since I don't own a 5. http://www.w3.org/TR/css3-mediaqueries/#orientation

Categories : HTML

CSS Media Query - Device width - portrait vs landscape
1) Well, Yes it does in most cases, consider following example: @media all and (max-device-width: 400px) { // styles here } Now your styles are applied only when the screen is 400px wide or less. Whether the device is in portrait or landscape mode does not matter. But in iOS, there's a problem. There the device width is always 320px (iPhone) or, 768px for the iPad. So you need to use the orientation media query, otherwise or you won’t be able to tell that the user has changed orientation. 2) laptops and desktops match landscape mode as default (but you can change the orientation mode of browser manually). Since the use-case of orientation is on the iOS, you can be sure there's no random/undefined orientation. Here is a nice tool for CSS3 media query: http://cssmediaqueries.com/

Categories : CSS

Fixed Header/Panels don't "un-fix"visually in landscape despite media query in Android
Let me see your codes, meanwhile add a class to your header and try this script. JQUERY $(document).ready(function(){ $(".your_header").fixedtoolbar({ tapToggle: false }); });

Categories : Jquery

Is there a single common media query for styling all iphone 4, 4s, 5
Ues following media query : iPhone in portrait & landscape : @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { /* STYLES GO HERE */} For more information http://stephen.io/mediaqueries/ this refrence,its really very helpful.

Categories : Iphone

Media Query Questions - scale down for iPhone/ mobile phones?
Okay, I found a solution. I removed the @Media Query zoom and also removed minimum-scale=1.0 from the meta tag. This still allows my app's media queries for 768px to kick-in. Yet on mobile devices 320px-568px, the website will just be scaled down to fit the iphone screen. Works. Not a mobile-friendly solution, but will do. Our web-app is not meant for mobile-users (cellphones).

Categories : HTML

bootstrap multiple resolution all layout inline media query css for responsive design including android iphone and web asp.net
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px

Categories : Asp Net

Is there any difference between iPhone 4 and iPhone 5 when I use media queries?
According to this site, the difference is with the max-device-width: In iphone4 it's 480px In iphone5 it's 568px iphone4 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* STYLES GO HERE */} iphone5: @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { /* STYLES GO HERE */ } ...and both have Device-pixel-ratio: 2 so iphone4 has screen height= 960px (Actual Pixels) and iphone5 has screen height= 1136px (Actual Pixels)

Categories : CSS

Mobile website does not zoom on Safari in landscape mode
I tend to use those lines in my head to optimize responsive sites: <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="cleartype" content="on"> Maybe adding those will fix your problem? I know from experience, that iOS Safari behaves strange in some cases. Here is a line that I use to fix some other issues I had with it before: <!-- This script prevents links from opening in Mobile Safari. https://gist.github.com/1042026 --> <!-- <script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(

Categories : Android

media queries for smartphone portrait, landscape and desktop?
Try adding orientation : landscape @media only screen and (min-device-width: 480px) and (max-device-width: 640px) and (orientation: landscape) { ... { See this site or this snippet for reference.

Categories : CSS

How to change CSS portrait to landscape in iphone?
You don't need JavaScript to achieve this functionality. Use CSS media queries: @media only screen and (orientation : portrait) { /* Portrait styles */ } @media only screen and (orientation : landscape) { /* Landscape styles */ } Or, you could set specific widths for iPhone landscape/portrait if you wished. @media only screen and (min-width:320px) and (max-width:479px) { /* Portrait styles */ } @media only screen and (min-width:480px) { /* Landscape styles */ }

Categories : Iphone

How to write media queries for HD/Retina Display in Landscape position?
You could use orientation:landscape in your media query instead of min-width: @media only screen and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 1.25), only screen and (orientation:landscape) and ( min--moz-device-pixel-ratio: 1.25), only screen and (orientation:landscape) and ( -o-min-device-pixel-ratio: 1.25/1), only screen and (orientation:landscape) and ( min-device-pixel-ratio: 1.25), only screen and (orientation:landscape) and ( min-resolution: 200dpi), only screen and (orientation:landscape) and ( min-resolution: 1.25dppx) {

Categories : CSS

Launch app Iphone portrait, and Ipad landscape
This works!!! for IOS 6 -(NSUInteger)supportedInterfaceOrientations{ if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) return UIInterfaceOrientationMaskPortrait; else return UIInterfaceOrientationMaskLandscape; } - (BOOL)shouldAutorotate { return YES; }

Categories : Iphone

tabbar is not visible in landscape mode of iphone
Refer the following link, https://github.com/djw/core-plot/tree/master/examples/iOS%20Rotation%20Utilities this link contains iOS rotation utility classes, use like this. Hope it will helps you.

Categories : Iphone

how to make the UIScreen bounds landscape in iphone app
I use orientation to see how to interpret the UIScreen size: UIDeviceOrientation orientation = [[UIDevice currentDevice] orientation]; if (orientation!=UIDeviceOrientationPortrait) { int width = screenRect.size.height; int height = screenRect.size.width; screenRect.size.height = height; screenRect.size.width = width; backgroundView.frame = screenRect; } else{ backgroundView.frame = screenRect; }

Categories : IOS

when iphone Device orientation is face up/down, can I tell if it´s landscape or portrait?
Yes you can, the UIDeviceOrientation is an enum which contains: UIDeviceOrientationUnknown, UIDeviceOrientationPortrait, UIDeviceOrientationPortraitUpsideDown, UIDeviceOrientationLandscapeLeft, UIDeviceOrientationLandscapeRight, UIDeviceOrientationFaceUp, UIDeviceOrientationFaceDown There are even two helpers: UIDeviceOrientationIsPortrait(orientation) UIDeviceOrientationIsLandscape(orientation) Just cmd on UIDeviceOrientation to show the headerfile where the enum is declared.

Categories : IOS

CSS media queries not working in Safari
use this meta in your head <!DOCTYPE html> <html lang="en-us"> <head> <meta name="viewport" content="width=device-width"> </head> <body> </body> </html>

Categories : CSS

$(window).width() returning same value in portrait/landscape mode of iPhone
<meta name="viewport" content="width=device-width; initial-scale=1.0;"> Add that instead, I've tested it on my iPhone and it's output is correct. Tested it with $(window).width();

Categories : Jquery

Video view is not full screen in landscape mode iPhone
Use MPMPMoviePlayerViewController, MPMoviePlayerViewController *mpvc = [[MPMoviePlayerViewController alloc] initWithContentURL:url1]; NSError *_error = nil; [[AVAudioSession sharedInstance] setCategory: AVAudioSessionCategoryPlayback error: &_error]; [self presentMoviePlayerViewControllerAnimated:mpvc];

Categories : Objective C

Content in iOS app doesn't 'stretch' when iPhone turned to landscape mode
You can set the AutoresizingMasks in interface builder (right most tab in the right pane) or in your code, or you can set the frames manually, when the device is rotated (in willAnimateRotationToInterfaceOrientation: for example)

Categories : Iphone

Use ScriptProcessorNode in iPhone Safari
I found an answer by myself. It's need to add a source node to ScriptProcessorNode. Something like this. bufferNode = context.createBufferSource() var buffer = context.createBuffer(1, 1024, context.sampleRate) var data = buffer.getChannelData(0); for (var i = 0; i < 2048; i++) { data[i] = 0; } bufferNode.buffer = buffer; bufferNode.loop = true; generatorNode = context.createJavaScriptNode(2048, 1, 1); generatorNode.channelCount = 2; generatorNode.channelCountMode = "max"; generatorNode.channelInterpretation = "speakers"; generatorNode.onaudioprocess = function generateWhiteNoise(e) { var output = e.outputBuffer.getChannelData(0); console.log("onaudioprocess!"); for (var i = 0; i < output.length; i++) { output[i] = ( Math.random() * 2 ) - 1; } } bufferNode.c

Categories : Javascript

Media queries working in chrome but not safari, ie, or firefox?
Maybe you should use min-width instead of max-width. It's possible that your styles are always seen/unseen because there is always a max-width somewhere. The syntax is good though, also check if the hierarchy is good according to the html structure.

Categories : HTML

Issues taking pictures with ZBarReader in landscape orientation and flat iPhone position
My solution is to change the image orientation metadata in the wrong cases: -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info { [....] UIImage *image = [info objectForKey: UIImagePickerControllerOriginalImage]; if(image){ // This fixes a bug in ZBarReader taking picture in landscape orientation and device in flat position. NSLog(@"Image: %d, Device: %d",image.imageOrientation,self.interfaceOrientation); UIImageOrientation imgOrientation = image.imageOrientation; UIInterfaceOrientation interfaceOrientation = self.interfaceOrientation; if(interfaceOrientation == UIInterfaceOrientationLandscapeLeft && imgOrientation ==

Categories : Iphone

IOS6 landscape playing embedded youtube video from a uiwebview within an only portrait iPhone app
I had same problem. My solution is: 1.First of all turn on all orientations in your xcode project: 2.In AppDelegate.m add: -(NSUInteger)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window { NSArray *stackViewControllers = self.navigationController.viewControllers; UIViewController *rvc = [stackViewControllers objectAtIndex:stackViewControllers.count - 1]; if([rvc isKindOfClass:[VideoViewController class]]) { id presentedViewController = [rvc presentedViewController]; NSString *viewControllerName = NSStringFromClass([presentedViewController class]); if([viewControllerName isEqual:@"MPInlineVideoFullscreenViewController"] && [VideoViewController isVideoPlaying]) { return UIInterf

Categories : IOS

iphone safari reader styles
You could try adding <hr> where you want breaks, and hiding them in your CSS (so they only display in Reader mode, not on your normal site). I'm guessing on that, not sure if it would work. Also, check out this document.

Categories : HTML

Scrolling to a particular position in Safari on iPhone
You can scroll to a position on the page using scrollTo(h,v) //h = horizontal, v=vertical window.scrollTo(0,500); http://jsfiddle.net/vLmb9/ Edit: Spaced on the iPhone portion. You have to use setTimeout: setTimeout(function () { window.scrollTo(0, 500); }, 1000);

Categories : Javascript

Launching Safari on iPhone Application
If your goal is to display the website, you should use a webview. If by "on hide" you mean that you do not want to display the website but merely to get its contents, you should use NSURL (https://developer.apple.com/library/mac/#documentation/Cocoa/Conceptual/URLLoadingSystem/URLLoadingSystem.html#//apple_ref/doc/uid/10000165i ) or CFNetwork (http://developer.apple.com/library/mac/#documentation/Networking/Conceptual/CFNetwork/Concepts/Concepts.html#//apple_ref/doc/uid/TP30001132-CH4-SW10).

Categories : Iphone

Strange horizontal whitespace on iPhone 4 Safari
I would venture to guess that you are exposing a layout quirk in Mobile Safari because of the way that you are hiding/showing the contents of each .company element. Each time that you change the display property of an element, the browser must perform a reflow. Reflows (also called layouts) are prohibitively expense on lower powered mobile devices. This would likely explain why you are only seeing the issue on an iPhone 4. I myself tested on an iPhone 4 and iPhone 3GS, both running iOS 6.1.3, and I was able to reproduce the issue only when I expanded the top or bottom .company elements, but not the middle one. Perhaps this is because the middle .company element contains the fewer children, meaning fewer layout calculations are needed. Instead of applying display: block; and display: none

Categories : Iphone

Size of content in iframe in iOS Safari (iPhone)
It seams that in iOS 7 the Mobile Safari turned the seamless attribute for the iframe on by default with no way to turn it off. (Or at least form my own test on the Mobile Safari, this seams the case.) As of yet, I have not found of a way to make the IFrame responsive and retain the scrolling of the frame, but if you are willing to sacrifice the vertical scrolling you can use this code: HTML: <iframe scr="content.html" scrolling="no"></iframe> CSS: iframe { min-width: 100%; width: 100px; *width: 100%; } This solution works in a cross browser way, but keep in mind, if you turn the scrolling to "yes" then it won't anymore so you do need to know the height of your content.

Categories : Iphone

asp.net button text alignment in iphone safari
It probably has something to do with the table based layout forcing the button to the right. I would switch to a more modern approach to page layout (div's and external CSS). Take a look at this question and answer for an idea of how to do this. Align <div> elements side by side

Categories : Asp Net

FFMPEG Transcode so that I can view from iPhone Safari
According to the official ffmpeg documentation on http://trac.ffmpeg.org/wiki/x264EncodingGuide, this is my suggestion to encode a video file to at least Apple Quicktime compatibility : ffmpeg -i INPUT -c:v libx264 -movflags +faststart -profile:v normal -pix_fmt yuv420p -c:a aac -cutoff 15000 -b:a 128k OUTPUT.mp4 Have a nice day ;)

Categories : Iphone

Can't load video for iphone Safari/Chrome
First of, you need to insert the video element into the DOM before issuing a play. And before playing you must issue a load. $('#VideoPlaceHolder').click(function() { var videoElement = document.createElement('video'); videoElement.src = 'Video.mp4'; // Inserts video element as a child to the DIV being clicked. $(this).append(videoElement); // Issue a load, and then play. videoElement.load(); videoElement.play(); }); It might be good to know that on most mobile browsers autostart is disabled and the load must be issued after a user click. This is to prevent a browser from starting to download a huge video while the viewer might be on an expensive connection (e.g. data-roaming while on vacation). Hopefully, this helps.

Categories : Jquery

ajax call on iPhone Safari does not return
It does seem to be a timeout issue, once I specified an explicit timeout (2.5 seconds), things worked well. I also cleaned up the surrounding code but I don't think they are related to this ajax not returning.

Categories : Jquery

iPhone safari do not scale (zoom) portion of content
This can be done by using the -webkit-transform: scale in css and detecting the dom width and adjusting the scale number. <style type="text/css"> iframe { -webkit-transform: scale(1.5); } </style>

Categories : Javascript

IPhone Safari Bookmarklet to paste clipboard into Drafts
unfortunately, it seems like, according to the state of things as they are right now, this is impossible. I'm better off with the clipboard in the iPhone, it seems. Thank you for checking out. The command I was looking for is available in the iPad, you can reach it through this: javascript:window.location='drafts://x-callback-url/create?text='+encodeURIComponent(location.href+'%5Cn%5Cn')+encodeURIComponent(window.getSelection()) According to the article by Federico Viticci, this encodeURIComponent(window.getSelection()) being the snippet that grabs the actual selection. This happens because when you open the bookmarks tab in the iPhone, it deselects your selection and the snippet becomes useless. In the iPad, you must keep the Always Show Bookmarks option on.

Categories : Iphone

Javascript sort function nor working in Safari/iPhone
The problem is that Safari and the other mentioned Browser's (chrome on iphone) can't parse the input String you pass to the constructor. Which results in an Invalid Date which primitives value is NaN Hence, the sort function does not work as inteded, comparing return (NaN > NaN) ? 1 : (NaN < NaN) ? -1 : 0;, resulting in return 0 To work around this, with a minimum of parsing effort, i thought of just splitting the String by -|:|T|+. And use The date parts on their own to construc a new Date Note: Unfortunetaly sth like var d = Date.apply([year,month,...]) is not possible So here is a sort function which works for me on Safari var dates = [{ name: "A", created_time: '2013-06-05T08:05:06+0000' }, { name: "B", created_time: '2013-06-03T10:05:06

Categories : Javascript

When exiting html5 full screen mode css media queries don't work - safari
Ok, so I did a mockup outside of my app with the same conditions (with none of the other code) and realized this was working in Safari in that test. I was using: $(document).stop(true, true); in an event bound to exiting full screen. Apparently Safari didn't like this. Now that that is removed, it works fine in Safari again.

Categories : CSS

@media not resizing fonts on iphone
You should see the answer in this link you are missing -webkit-text-size-adjust: none;

Categories : Iphone

Media queries on iphone mail
Actually there is quite a lot of documentation available via Apple's developer portal (no need to register). For your specific question this ressource should do the trick: https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html This is also a good entry point to learn more about web apps on iOS ranging from technical stuff to the user interface guidelines That being said, you should just reorder your CSS so that the @media query is the final part of the CSS (since it needs to overwrite previous CSS definitions, which it can't if they are ordered your way).

Categories : HTML



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.