Damian Kard

Damian Kard Graphic designer

Temat: style css wykrywane przez iPad

Witam, potrzebuje by moja strona wczytywala inny plik styli przy przegladaniu jej na ipadzie, w pliku header znalazlem:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/normalize.css" />
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/prettyPhoto.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/grid.css" />


staralem sie dodac rozne opcje by ipad czytal inne pliki css i dodalem np:

<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px) and (orientation:landscape)" type="text/css">


niestety przy odwiedzaniu strony na ipadzie nadal nic sie nie zmienia :/ jak to wykonac?Damian Kard edytował(a) ten post dnia 08.02.13 o godzinie 10:54

Temat: style css wykrywane przez iPad

http://css-tricks.com/css-media-queries/
Damian Kard

Damian Kard Graphic designer

Temat: style css wykrywane przez iPad

Po tym co widze na wideo to chyba nie do konca o to mi chodzi, mialem na mysli raczej to zeby po prostu ipad wczytywal sobie zupelnie inny plik css strony niz normalna przegladarka na kompie, potrzebuje troche rzeczy zmienic w css pod ipada.

Temat: style css wykrywane przez iPad

Czy zrozumiałeś co tam jest napisane ?
"[...]The CSS media query syntax for calling an external stylesheet is like this:[...]"
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

Do tego jest łopatologiczny obrazek.


Obrazek
Michał Szaniewski edytował(a) ten post dnia 08.02.13 o godzinie 15:17
Damian Kard

Damian Kard Graphic designer

Temat: style css wykrywane przez iPad

dodaje taki kod do mojej strony, podaje dobra sciezke do css i jakos nie widac zadnych zmian

Temat: style css wykrywane przez iPad

a nie, to ok

pokaż kod
Damian Kard

Damian Kard Graphic designer

Temat: style css wykrywane przez iPad

 
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>

<SCRIPT LANGUAGE="JavaScript">
<!-- This script generated free online at -->
<!-- Wilson Information http://www.wilsoninfo.com -->

<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=400,height=400,left = 440,top = 200');");
}
// End -->
</script>


<style type="text/css">
/*------------------POPUPS------------------------*/
body {
background: #ffffff;
margin: 0;
padding: 0;
font: normal 10px 'Reenie Beanie', cursive;
line-height: 1.8em;
min-width: 980px;
}
img {border: none;}

a {color: #0052af;}

h1 {
font: 3.5em normal 'Reenie Beanie', cursive;
padding: 20px;
margin: 0;}

h1 small{
font: 0.3em normal 'Reenie Beanie', cursive;
text-transform:uppercase;
display: block;}
.container {width: 900px; margin: 0 auto; font-size: 1.2em; color: #000000;}



/*------------------POPUPS------------------------*/
#fade {
display: none;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: .20;
z-index: 9999;
}
.popup_block{
display: none;
background: #000;
padding: 20px; border: 20px solid #000;
font-size: 12px;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
.popup p {
padding: 5px 10px;
margin: 5px 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script>
$(document).ready(function() {
//When you click on a link with class of pop light and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size

//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value

//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a class="close" href="#"><img class="btn_close" title="Close" src="http://marinex.com.pl/gfx/modal_zamknij.png" alt="Close" /></a>');

//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accommodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 20) / 2;
var popMargLeft = ($('#' + popID).width() + 20) / 2;

//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies

return false;
});

//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer…
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>

<title><?php if ( is_category() ) {
echo 'Category Archive for "'; single_cat_title(); echo '" | '; bloginfo( 'name' );
} elseif ( is_tag() ) {
echo 'Tag Archive for "'; single_tag_title(); echo '" | '; bloginfo( 'name' );
} elseif ( is_archive() ) {
wp_title(''); echo ' Archive | '; bloginfo( 'name' );
} elseif ( is_search() ) {
echo 'Search for "'.wp_specialchars($s).'" | '; bloginfo( 'name' );
} elseif ( is_home() ) {
bloginfo( 'name' ); echo ' | '; bloginfo( 'description' );
} elseif ( is_404() ) {
echo 'Error 404 Not Found | '; bloginfo( 'name' );
} elseif ( is_single() ) {
wp_title('');
} else {
echo wp_title( ' | ', false, right ); bloginfo( 'name' );
} ?></title>
<meta name="description" content="<?php wp_title(); echo ' | '; bloginfo( 'description' ); ?>" />
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<link rel="apple-touch-icon" href="http://theploughharborne.co.uk//wp/wp-content/themes/theme1317/logoappleplough.png"/>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="icon" href="<?php bloginfo( 'template_url' ); ?>/favicon.ico" type="image/x-icon" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo( 'name' ); ?>" href="<?php bloginfo( 'rss2_url' ); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo( 'name' ); ?>" href="<?php bloginfo( 'atom_url' ); ?>" />
<!-- The HTML5 Shim is required for older browsers, mainly older versions IE -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0"  alt="" /></a>
</div>
<![endif]-->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/normalize.css" />
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/prettyPhoto.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/grid.css" />


<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
<!--[if lt IE 9]>
<style type="text/css">
.border {
behavior:url(<?php bloginfo('stylesheet_directory'); ?>/PIE.php)
}
</style>
<![endif]-->

<script type="text/javascript">
// initialise plugins
jQuery(function(){
// main navigation init
jQuery('ul.sf-menu').superfish({
delay: <?php echo of_get_option('sf_delay'); ?>, // one second delay on mouseout
animation: {opacity:'<?php echo of_get_option('sf_f_animation'); ?>',height:'<?php echo of_get_option('sf_sl_animation'); ?>'}, // fade-in and slide-down animation
speed: '<?php echo of_get_option('sf_speed'); ?>', // faster animation speed
autoArrows: <?php echo of_get_option('sf_arrows'); ?>, // generation of arrow mark-up (for submenu)
dropShadows: <?php echo of_get_option('sf_shadows'); ?> // drop shadows (for submenu)
});
// prettyphoto init
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
animation_speed:'normal',
theme:'facebook',
slideshow:5000,
autoplay_slideshow: false
});
// easyTooltip init
jQuery("a.tooltip, .social-networks li a").easyTooltip();
jQuery("#widget-footer div:last-child").addClass("last-col");
jQuery('#widget-footer > div').equalHeightColumns();
jQuery(".recent-posts.team li:odd").addClass("nomargin");
jQuery("#folio-posts .folio-item").click(function(){
window.location=$(this).find("a.more-bullet").attr("href"); return false;
});
});
// Init for audiojs
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
</script>

<script type="text/javascript">
jQuery(window).load(function(){
// Masonry plugin init
jQuery('#folio-posts').masonry({
// options
itemSelector : '.folio-item',
columnWidth : 20,
isAnimated: !Modernizr.csstransitions
});
})
</script>

<!-- Custom CSS -->
<?php if(of_get_option('custom_css') != ''){?>
<style type="text/css">
<?php echo of_get_option('custom_css' ) ?>
</style>
<?php }?>




<style type="text/css">
/* Body styling options */
<?php $background = of_get_option('body_background');
if ($background != '') {
if ($background['image'] != '') {
echo 'body { background-image:url('.$background['image']. '); background-repeat:'.$background['repeat'].'; background-position:'.$background['position'].'; background-attachment:'.$background['attachment'].'; }';
}
if($background['color'] != '') {
echo 'body { background-color:'.$background['color']. '}';
}
};
?>
/* Header styling options */
<?php $header_styling = of_get_option('header_color');
if($header_styling != '') {
echo '#header {background-color:'.$header_styling.'}';
}
?>
/* Links and buttons color */
<?php $links_styling = of_get_option('links_color');
if($links_styling) {
echo 'a{color:'.$links_styling.'}';
echo '.button {background:'.$links_styling.'}';
}
?>
/* Body typography */
<?php $body_typography = of_get_option('body_typography');
if($body_typography) {
echo 'body {font-family:'.$body_typography['face'].'; color:'.$body_typography['color'].'}';
echo '#main {font-size:'.$body_typography['size'].'; font-style:'.$body_typography['style'].';}';
}
?>
</style>
</head>

<body <?php body_class(); ?>>



<div id="main"><!-- this encompasses the entire Web site -->
<header id="header">
<div class="header-wrapper">
<div class="container_12">
<div class="grid_12">
<nav class="primary">
<?php wp_nav_menu( array(
'container' => 'ul',
'menu_class' => 'sf-menu',
'menu_id' => 'topnav',
'depth' => 0,
'theme_location' => 'header_menu'
));
?>
</nav><!--.primary-->
<?php if ( of_get_option('g_search_box_id') == 'yes') { ?>
<div id="top-search">
<form method="get" action="<?php echo get_option('home'); ?>/">
<input type="text" name="s" class="input-search" placeholder="Search" /><input type="submit" value="" id="submit">
</form>
</div>
<?php } ?>
<div id="widget-header">
<?php if ( ! dynamic_sidebar( 'Header' ) ) : ?>
<!-- Widgetized Header -->
<?php endif ?>
</div><!--#widget-header-->
</div>
</div>
</div><!--.container-->
</header>
<div class="container_12 primary_content_wrap clearfix">

Temat: style css wykrywane przez iPad

A teraz w której linijce użyłeś takiego kodu, ja nie mogę odnaleźć.
Damian Kard

Damian Kard Graphic designer

Temat: style css wykrywane przez iPad

byl zaraz po endif, nie mogles znalezc bo wyrzucilem to skoro nie dzialalo.


<![endif]-->
<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px) and (orientation:landscape)" type="text/css">
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/normalize.css" />
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/prettyPhoto.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/grid.css" />

Temat: style css wykrywane przez iPad

I uważasz nadal że masz dobrą ścieżkę ? Jeżeli tak to radzę to komuś zlecić.
Damian Kard

Damian Kard Graphic designer

Temat: style css wykrywane przez iPad

sciezke wpisywalem na rozne sposoby:

href="/css/ipad.css"
href="http://mydomain.com/themes/css/ipad.css"
href="css/ipad.css"
href="/ipad.css"

Temat: style css wykrywane przez iPad

I żądne nie jest prawidłowy
Dobra ścieżka
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/normalize.css" />

Twoja ścieżka
<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px) and (orientation:landscape)" type="text/css">

Widzisz różnicę ?

Następna dyskusja:

Brak odczytu pliku CSS prze...




Wyślij zaproszenie do